.background {
     background-color: #FBE8BD;
 }

 /*banner*/
 .recipesbanner {
     width: 100%;
     height: 830px;
     overflow: hidden;
     display: flex;
     align-items: center;
     justify-content: center;
     background-color: #193060;
 }

 .recipesplate {
     background-image: url(../image/plate.png);
     background-position: center;
     background-size: cover;
     aspect-ratio: 1/1;
     height: 90%;
     display: flex;
     justify-content: center;
     align-items: center;

 }

 .recipestext {
     width: 50%;
 }

 /*content*/
 .content {
     margin: 110px auto;
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
     align-items: center;
     width: 80%;
 }

 /*tangyuan*/
 .tangyuan {
     width: 1280px;
     justify-content: space-between;
     align-items: center;
     display: flex;
     flex-wrap: wrap;
     margin-bottom: 110px;
     gap: 20px;
 }

 .intro1 {
     width: 485px;
     text-align: left;
 }

 /*mooncake*/
 .mooncake {
     width: 1280px;
     justify-content: space-between;
     align-items: center;
     display: flex;
     flex-wrap: wrap;
     gap: 20px;
 }

 .intro2 {
     width: 485px;
     text-align: left;
 }

 @media screen and (max-width: 1245px) {
     .content {
         max-width: 90%;
         justify-content: center;
     }

     .tangyuan {
         display: flex;
         flex-direction: column-reverse;
     }

     .mooncake {
         display: flex;
         justify-content: center;
     }
 }

 /*mobile*/
 @media screen and (max-width: 600px) {
     .content {
         max-width: 80%;
         justify-content: center;
     }

     .tangyuan {
         display: flex;
         flex-direction: column-reverse;
     }

     .mooncake {
         display: flex;
         justify-content: center;
     }
 }

 @media screen and (max-width: 365px) {
     .content {
         max-width: 90%;
         justify-content: center;
     }

     .tangyuan {
         display: flex;
         flex-direction: column-reverse;
     }

     .mooncake {
         width: 80%;
         display: flex;
         justify-content: center;
     }
 }