@media(width > 30rem){
  
      h1{
        font-size:3rem
      }
      h2{
        font-size:2.2rem;
      }
      h3{
        font-size:1.85rem;
      }
      h4{
        font-size:1.15rem;
      }

      .card{
        padding:1.5rem; 
      }

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

      .card-1{
        grid-column:span 2;
      }

      .card-2 .img-container{
        width:150%;
      }

      .card-3{
         max-height:100%;
      }

      .card-3 img{
        width:100%;
      }

      .card-4 {
        grid-column: span 2;
        flex-direction:row;
        text-align:left;
      }
      .card-4 img{
        order:3;
        width:40%;
      }
      .card-4 h3{
        order:1;
      }
      .card-4 h4{
        order:2;
      }

      .card-5{
        flex-direction:row;
        align-items:center;
        padding:2rem;
        grid-column:span 2;
        grid-row:4 / 5;
        text-align:left;
      }
      .card-5 h2{
        text-align:left;     
      }
      .card-5 img{
        width:45%;
      }

      .card-6{
        justify-content:center;
      }
      .card-6 img{
        width:83%;
      }

      .card-7{
          justify-content:center;
      }
      
      .card-8{
            flex-direction:row;
            grid-column:span 2;
            grid-row: 6 / 7;
            align-items:center;
      }
      .card-8 img {
            width:200px;
      }
         
}

@media(width > 40rem){
      .grid-container{
          grid-template-columns:repeat(3, 1fr);
          grid-auto-rows:auto;
          gap:2rem;
      }
          
      .card-1{
          grid-column:span 2;
      }

      .card-4 {
            grid-column:3;
            grid-row:1 / 3;
            flex-direction:column;
            justify-content:center;
            gap:1.25rem;
      } 
      .card-4 img {
            order:1;
            max-width:180%;
            width:180%;
            align-self:self-start;
      }

      .card-5{
            flex-direction:row;
            grid-column:2 / 4;
            grid-row:3 
      }
      .card-8{
            flex-direction:row;
            grid-column: 1 / 3;
            grid-row: 4;
      }
      .card-8 img {
            width:200px;
      } 
         
}


@media (width > 62.5rem){
       
        body{
            padding-block:5rem;
        }
        h1{
           font-size:3.75rem;
        }

        h2{
          font-size:2.5rem;
          text-align:left;
        }

        h3{
          font-size:2rem;
        }

        .grid-container{
            grid-template-columns:repeat(4, 1fr);
            grid-auto-rows:59px;
            gap:2rem;
        }
        .card{
             padding:1.5rem;
        }
        .card-1{
            grid-column:2 / 4;
            grid-row:span 4;
            justify-content: center;
            align-items:center;
        }

        .card-2{
            grid-column:2 / 3;
            grid-row:5 / 8;
            padding:1rem 2rem 1rem 1.25rem;
         
        }
        .card-2 .img-container{
            width:158%;
        }

        .card-3{
          grid-column:3 / 4;
          grid-row: 5 / 8;
        }

        .card-4{
          grid-column:4 / 5;
          grid-row:span 7;
          padding-left:2rem;
        }

        .card-5{
           grid-column:3 / 5;
           grid-row: span 3;
           gap:1rem;
        }

        .card-6{
          grid-column:2;
          grid-row: 8 / 11;
        }
        
        .card-7{
          grid-column:1;
          grid-row: 1 / 6;
          justify-content:center;
          align-items:center;
        }
        .card-7 img{
           width:192px;
        }

        .card-8{
          grid-column:1;
          grid-row: 6 / 11;
          flex-direction:column;
          justify-content: space-between;
          align-items: center;
      } 
      
      .card-8 img{
            width: 110%;
            margin-right:-1rem;
      }
}