Product page media-query

media-query.css

@media (max-width: 680px) {
  header {
    flex-direction: column !important;
    nav {
      margin-top: 1rem;
    }
  }
  
  .course, .pricing {
    height: auto;
    flex-direction: column;
    padding: 2rem 1rem;
  }
  
  .cards {
    padding: 2rem 0;
    transition: all .3s;
    
    .info_wrapper {
      padding: 0 .5rem;
    }
  }
  
  .cards:hover {
    box-shadow: 1px 1px 4px 4px rgba(0,0,0,0.134);
  }
  
  #video {
    width: 95%;
  }
}

@media (max-width: 340px) {
  header {
    .logo {
      font-size: .9rem;
      margin-left: -4rem;
      span {
        margin-left: -2rem;
      }
    }
    
    nav ul {
      width: 100%;
      flex-direction: column;
    }
    
    nav ul li a {
      width: 100%;
      line-height: 2rem;
      padding: .6rem 2rem;
      color: #58c7a2;
    }
  }
  
  .hero {
    h3, p {
      display: none;
    }
  }
  
  .course {
    .cards {
      h3 {
        font-size: 1rem;
      }
      
      p {
        font-size: .9rem;
      }
    }
  }
  
  .info_wrapper button, .btn {
    padding: .6rem 2rem;
    font-size: .9rem;
  }
  
  .pricing {
    .small {
      height: 8rem;
      width: 8rem;
    }
    
    h2 {
      width: 50%;
      font-size: 1.2rem;
    }
    
    h3 {
      font-size: 1rem;
    }
    
    p {
      font-size: .8rem;
    }
  }
  
  .contact_us {
    h3 {
      font-size: 1.3rem;
    }
    
    form {
      width: 70%;
      
      textarea {
        height: 6rem;
      }
      
      .submit {
        padding: .6rem;
        font-size: 1rem;
      }
    }
  }
  
  footer {
    flex-direction: column;
    line-height: 1.5rem;
  }
}