/* Width */

@media (max-width: 80em) {
  html {
    font-size: 50%;
  }
}

@media (max-width: 71em) {
  /* config 3 results */
  .container {
    max-width: 100rem;
  }
  header {
    margin-bottom: 1rem;
  }
  .cards__container {
    grid-template-columns: repeat(4, 1fr);
  }
  .flex {
    flex-direction: column;
    align-items: center;
    flex-grow: 2;
    margin-top: 2rem;
    gap: 2rem;
  }
  .search {
    width: 50%;
  }
  .cards__container {
    gap: 0rem;
  }
}

@media (max-width: 60em) {
  .cards__container {
    grid-template-columns: repeat(3, 1fr);
  }
  .search {
    width: 75%;
  }
  .movie__card {
    height: 44rem;
    width: 32rem;
  }

}

@media (max-width: 50em) {
  .cards__container {
    grid-template-columns: repeat(2, 1fr);
  }
  .search {
    width: 100%;
  }
  .movie__card {
    height: 48rem;
    width: 36rem;
  }
  .footer-contacts {
    font-size: 1.6rem;
  }
  .social-network a svg {
    height: 4rem;
    width: 4rem;
  }
}
@media (max-width: 37em) {
  .cards__container {
    grid-template-columns: repeat(1, 1fr);
  }
  .movie__card {
    height: 56rem;
    width: 42rem;
  }
  .overlay__container {
    height: 60rem;
    width: 44rem;
  }
  .overlay__description {
    font-size: 37%;
  }
  .social-network {
    align-items: center;
  }
  .footer-contacts {
    font-size: 1.4rem;
  }
}

/* Height */

@media (max-height: 57.5em) and (orientation:landscape){
  .overlay__container {
    height: 72rem;
    width: 60rem;
  }
}

@media (max-height: 40.5em) {
  .overlay__container {
    max-height: 60rem;
    max-width: 52rem;
  }
}

@media (max-height: 33.5em)  and (orientation:landscape){
  .overlay__description .flex > *{
    font-size: 2rem;
  }
  .overlay__description > * {
    font-size: 1.6rem;
  }
  .overlay__container {
    height: 48rem;
    width: 28rem;
  }
}

@media (max-height: 28em)  and (orientation:landscape){
  .overlay__description .flex > *{
    font-size: 1.6rem;
  }
  .overlay__description > * {
    font-size: 1.4rem;
  }
  .overlay__container {
    height: 40rem;
    width: 32rem;
  }
}

@media screen and (hover: none) {
  .overlay__description {
    opacity: 100%;
  }
  .overlay__description:hover {
    opacity: 0%;
  }
}