.lessons_page {

  visibility: visible;
  height: 0px;


}

.video-container {
  margin: 20px 0;
  text-align: center;
}

video {
  max-width: 100%;
  height: auto;
  border: 1px solid #ccc;
  border-radius: 8px;
}

#lessons_page {

  visibility: visible;
  height: auto;

  /* visibility: collapse;
  height: 0; */
}

.lesson_banner {

  height: 10vh;
  width: calc(740px + 10vw + 320px);

  margin-left: auto;
  margin-right: auto;

  background-color: rgb(0, 0, 0);
  color: white;
  text-align: center;
  font-size: var(--font-size-large);
  

  font-family: 'Times New Roman', Times, serif;

  display: flex;
  justify-content: center;
  align-items: center;

  box-shadow: 5px 5px 20px black;
}

.wrapper_lessons {
  width: calc(740px + 10vw + 320px);
  margin: 5vh auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-gap: 30px;

}

.vid_img {
  width: 100%;
  border-radius: 3px 3px 0 0;

}

.description_image_lessons {

  margin-top: -7px;
  border-radius: 0 0 3px 3px ;

  font-size: 1em;
  background-color: black;
  color: white;

  height: 30px;

  display: flex;
  justify-content: center;
  align-items: center;

}


.vid_card {
  text-decoration: none;
}

.lesson_card {

  width: 300px;
  border-radius: 3px;

  opacity: 0.8;

}
.lesson_card:hover {

  width: 300px;
  border-radius: 3px;

  opacity: 1;

}


.lessons_anchor{
  height: 10px;
}

.wrapper_lessons .lesson_card {


  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(45%, 5fr));
  grid-gap: 5px;


  width: 100%;
  cursor: pointer;
  transition: 1s ease;
  border-radius: 3px;
}

.wrapper_lessons .lesson_card:hover {
  /* transform: scale(1.05); */
  transform: scale(1.02);
  box-shadow: 5px 5px 20px black;
  transition: 0.5s;
}

.pricing_anchor {
  height: 10px;

}




@media (max-width: 1400px){ 

  .wrapper_lessons {
    width: 90%;
  }

  .lesson_banner {
    margin-left: auto;
    margin-right: auto;
    width: 90%;
  }
}


@media (max-width: 800px){

  .pricing_anchor {
    height: 0px;
  
  }

  .lessons_anchor{
    height: 0px;
  }

  .lesson_banner {
    width: 95%;
    margin-left: auto;
    margin-right: auto;
    font-size: 5vw;
  }

  .lesson_pricing {
    width: 90%;
  }

  .wrapper_lessons {

    width: 100%;

    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(45%, 5fr));
    grid-gap: 5px;

    padding: 5vw;
  }

  .description_image_lessons {

    font-size: 10px;
  }


 }