* {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }

 body {
     padding: 1rem;
     height: 100vh;
     display: flex;
     justify-content: center;
     align-items: center;
     background-color: hsl(0, 5%, 96%);

 }

 .box {

     border-radius: 10px;
     padding: 1rem 1rem;
 }

 img {
     height: 1rem;
 }

 .container {
     display: grid;
     height: 80vh;
     width: 55%;
     gap: 1.5rem;
     grid-template-columns: repeat(4, 1fr);
     grid-template-rows: repeat(10, 1fr);
     font-family: "DM Sans", sans-serif;
     font-optical-sizing: auto;
     font-style: normal;


 }


 /* box 1  */

 .box1 {

     grid-row: 1/6;
     display: flex;
     justify-content: center;
     align-items: center;
     flex-direction: column;
     background-color: hsl(31, 66%, 93%);
 }

 .box1 span {
     font-size: 1.8rem;
     line-height: 1.5rem;
     font-weight: 500;
     letter-spacing: -2.2px;

 }

 .box1 #box2_two {
     color: hsl(256, 67%, 59%);
     font-style: italic;
 }

 .box1 img {
     margin-top: 1.2rem;
     height: 26%;
 }


 /* box 2  */

 .box2 {
     grid-column: 2/4;
     grid-row: 1/5;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     background-color: hsl(256, 67%, 59%);

 }

 .box2 img {
     margin-top: 1rem;
     width: 8rem;
     height: auto
 }

 .box2 span {
     font-weight: 500;
     font-size: 2.9rem;
     text-align: center;
     line-height: 3rem;
     color: hsl(0, 0%, 100%);
 }

 .box2 #one {
     color: hsl(39, 100%, 71%);
 }

 .box2 #twoo {
     font-style: italic;
 }

 .box2 p {
     color: hsl(0, 0%, 100%);
     font-weight: 400;
     font-size: 0.90rem;
     margin-top: 0.3rem;
 }

 /* box 3 */

 .box3 {
     grid-row: 1/8;
     grid-column: 4/5;
     display: flex;
     flex-direction: column;
     background-color: hsl(254, 88%, 90%);
     justify-content: space-around;
     overflow: hidden;

 }

 .box3 img {
     height: auto;
     width: 17.3rem;
 }

 .box3 #one {
     font-size: 1.5rem;
     line-height: 1.3rem;
     letter-spacing: -1.5px;
     font-weight: 500;
 }

 .box3 #two {
     font-size: 0.90rem;
     font-weight: 400;
     line-height: 1rem;
 }

 /* box 4  */

 .box4 {
     grid-row: 6/12;
     grid-column: 1/2;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     overflow: hidden;
     background-color: hsl(39, 100%, 71%);

 }

 .box4 span {
     font-size: 1.9rem;
     line-height: 1.7rem;
     letter-spacing: -2.5px;
     font-weight: 500;
 }

 .box4 img {

     height: auto;
     width: 10.3rem;
 }

 /* box5 */

 .box5 {
     grid-column: 2/3;
     grid-row: 5/8;
     display: flex;
     flex-direction: column;
     overflow: hidden;
     background-color: hsl(0, 0%, 100%);
     justify-content: space-between;
 }

 .box5 img {
     height: auto;
     width: 14.5rem;
 }

 .box5 span {
     font-weight: 500;
     font-size: 1.37rem;
     line-height: 1.2rem;
     color: hsl(0, 0%, 7%);
 }



 /* box 6 */

 .box6 {
     grid-column: 3/4;
     grid-row: 5/8;
     display: flex;
     flex-direction: column;
     overflow: hidden;
     background-color: hsl(39, 100%, 71%);
 }

 .box6 img {
     margin-top: 0.7rem;
     width: auto;
     height: 10rem;
 }

 .box6 span {
     font-weight: 500;
     font-size: 1.3rem;
     line-height: 1.2rem;
 }


 /* box 7  */

 .box7 {
     grid-column: 2/3;
     grid-row: 8/12;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     background-color: hsl(0, 0%, 100%);

 }

 .box7 img {
     height: auto;
     width: 8.5rem;
 }

 .box7 #box7_one {
     font-size: 2.9rem;
     font-weight: 500;
 }

 .box #box7_two {
     font-size: 0.89rem;
     font-weight: 400;
 }

 /* box 8 */

 .box8 {
     grid-column: 3/5;
     grid-row: 8/12;
     display: flex;
     justify-content: space-between;
     align-items: center;
     background-color: hsl(256, 67%, 59%);
 }

 .box8 span {
     color: hsl(0, 0%, 100%);
     font-weight: 500;
     font-size: 1.7rem;
     line-height: 1.3rem;
 }

 .box8 img {
     height: auto;
     width: 11.4rem;
 }



 @media(max-width:1343px) {

     body {
         height: auto;
     }

     .container {

         height: 110vh;
         grid-template-columns: repeat(3, 1fr);
         grid-template-rows: repeat(16, 1fr);
     }

     .box1 {
         grid-row: 1/7;
     }

     .box3 {
         grid-column: 3/4;
         grid-row: 9/17;
     }

     .box4 {
         grid-row: 7/13;
     }

     .box5 {
         grid-row: 5/9;
     }

     .box6 {
         grid-row: 5/9;
     }

     .box7 {
         grid-row: 9/13;
     }

     .box8 {
         grid-column: 1/3;
         grid-row: 13/17;
     }

 }


 @media(max-width:1042px) {

     .container {
         width: auto;
         padding: 0 10rem;
         height: 165vh;
         grid-template-columns: repeat(2, 1fr);
         grid-template-rows: repeat(24, 1fr);
     }

     .box1 {
         grid-row: 1/7;
     }

     .box2 {
         grid-column: 1/3;
         grid-row: 21/25;
     }

     .box3 {
         grid-column: 2/3;
         grid-row: 1/9;
     }

     .box4 {
         grid-row: 7/13;
     }

     .box5 {
         grid-column: 1/2;
         grid-row: 17/21;
     }

     .box6 {
         grid-column: 2/3;
         grid-row: 17/21;
     }

     .box7 {
         grid-row: 9/13;
     }

     .box8 {
         grid-column: 1/3;
         grid-row: 13/17;
     }
 }

 @media(max-width:700px) {

     .container {
         padding: 0 2rem;
         width: auto;
         height: auto;
         grid-template-columns: repeat(1, 1fr);
         grid-template-rows: repeat(auto, 1fr);
     }

     .box1 {
         grid-row: 29/31;
         display: flex;
         justify-content: center;
         /* align-items: center; */
         flex-direction: column;
     }

     .box1 span {
         font-size: 1.5rem;
     }

     .box2 {
         grid-column: 1/2;
         grid-row: 1/6;
     }

     .box3 {
         grid-column: 1/2;
         grid-row: 13/20;
     }

     .box3 #one {
         text-align: center;
     }

     .box3 img {
         width: auto;
     }

     .box3 #one {
         font-size: 1.4rem;
     }

     .box3 #two {
         text-align: center;
         font-size: 1rem;
     }

     .box4 {
         grid-row: 31/34;
     }

     .box4 img {
         margin-top: 1.8rem;
     }

     .box5 {
         grid-column: 1/2;
         grid-row: 6/9;
     }

     .box6 {
         grid-column: 1/2;
         grid-row: 9/13;
         overflow: hidden;

     }

     .box6 span {
         font-size: 1.33rem;
     }

     .box6 img {
         height: auto;
         width: 13rem;

     }

     .box7 {
         grid-column: 1/2;
         grid-row: 25/29;
     }

     .box7 img {
         margin-top: 1rem;
     }

     .box8 {
         grid-column: 1/2;
         grid-row: 20/25;
         flex-direction: column;
     }

     .box8text {
         display: flex;
     }

     .box8 span {
         text-align: center;
         font-size: 1.8rem;
         line-height: 1.7rem;
     }

 }