@media (min-width: 768px) {

  .hero-container img{
  max-width: 480px;
  }

  .hero-container h1{
    font-size: 32px;
    max-width: 500px;
  }

  .hero-container p{
    font-size: 24px;
    margin: 30px 30px 40px 30px;
  }

  .buttons{
  grid-template-columns: 1fr 1fr;
  padding: 12px;
  gap: 12px;
  }

   .default{
  margin-bottom: 0px;
  }

  h2{
    font-size: 48px;
  }

  .options{
  grid-template-columns: 1fr 1fr;
  gap: none;
  width: 650px;
  gap: 50px;
  }

  #tutoring-card{
    margin-top: 20px;
    margin-bottom: 20px;
  }

  .subjects{
    grid-template-columns: repeat(2, 280px);
  }
  
  .header p{
    max-width: 540px;
  }

  .reviews{
    --cardW: 420px;
  }
  
  .gallery{
    grid-template-columns: 1fr 1fr 1fr;
    width: 550px;
    height: 2180px;
  }

  .footer{
  grid-template-columns: 1fr 1fr 1fr;
  }
  
}

@media (min-width: 1024px){
  .hero-container p{
    max-width: 750px;
  }

  #btn-bar{
    display: none;
  }

  .hidden-a{
  display: flex;
  width: 400px;
  justify-content: space-evenly;
  }

  .nav-container{
    justify-content:center;
    gap: 120px;
  }

  #enrol-btn3{
    display: flex;
    transition: all 0.5s ease;
  }

  #enrol-btn3:hover{
    cursor: pointer;
  background: #287295;

  }

  .buttons{
    gap: 40px;
  }

  .subjects{
    grid-template-columns: repeat(3, 280px);
  }

  .reasons{
    grid-template-columns: 1fr 1fr;
  }

  .reviews{
    --cardW: 540px;
  }

  .reviews p{
    font-size: 18px;
  }

  .gallery{
    width: 730px;
    height: 2900px;
  }

  .gallery img{
  width: 240px;
  }
  
  .ready-options{
    grid-template-columns: 1fr 1fr;
  }

  .ready-container .header{
  width: 600px;
  } 

  .ready-container{
    padding: 40px;
    text-align: center;
  }
}

@media (min-width: 1440px){
  .nav-container{
    gap: 200px;
  }

  .options{
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 30px;
  }

  .footer{
    padding-left: 100px;
  }

  .copy{
    margin-left: 100px;
    margin-right: 100px;
  }
}