/* BubbleStory movie responsive corrections */

@media (max-width: 767px) {
  body main.bs-container > .grid {
    align-items: start;
    display: grid !important;
    gap: 10px !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    justify-content: stretch !important;
  }

  body main.bs-container > .grid > .card {
    justify-self: stretch;
    margin: 0 !important;
    max-width: none !important;
    min-width: 0 !important;
    width: auto !important;
  }

  body main.bs-container > .grid .card__link {
    display: block;
    width: 100%;
  }

  body main.bs-container > .grid .card .thumb {
    aspect-ratio: 27 / 40;
    width: 100%;
  }

  body main.bs-container > .grid .card .thumb img {
    aspect-ratio: auto !important;
    display: block;
    height: 100% !important;
    object-fit: cover !important;
    width: 100% !important;
  }

  body main.bs-container > .grid .price,
  body main.bs-container > .grid .duration,
  body main.bs-container > .grid .pill {
    font-size: 11px !important;
    line-height: 1.1 !important;
    padding: 4px 7px !important;
  }
}

@media (max-width: 360px) {
  body main.bs-container > .grid {
    gap: 8px !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 640px) {
  .bs-movie-detail {
    padding-bottom: 32px;
  }

  .bs-movie-detail__grid {
    column-gap: 14px;
    grid-template-columns: minmax(118px, 36vw) minmax(0, 1fr);
    row-gap: 18px;
  }

  .bs-movie-detail__poster-col {
    max-width: 145px;
    width: min(36vw, 145px);
  }

  .bs-movie-detail__poster-frame {
    align-items: center;
    aspect-ratio: 2 / 3;
    display: flex;
    justify-content: center;
    max-height: min(52vh, 300px);
  }

  .bs-movie-detail__poster {
    aspect-ratio: auto;
    height: 100%;
    max-height: min(52vh, 300px);
    object-fit: contain;
    width: 100%;
  }

  .bs-movie-detail__snippet {
    -webkit-box-orient: initial;
    -webkit-line-clamp: unset;
    display: block;
    overflow: visible;
  }

  .bs-movie-detail__mobile-sticky {
    bottom: auto;
    margin-top: -6px;
    padding: 0 14px 24px;
    position: static;
  }
}

@media (max-width: 380px) {
  .bs-movie-detail__grid {
    grid-template-columns: minmax(108px, 34vw) minmax(0, 1fr);
  }

  .bs-movie-detail__poster-col {
    max-width: 128px;
    width: min(34vw, 128px);
  }
}