@charset "utf-8";

* {
  box-sizing: border-box;
}

/* --------------------------------
  Business details carousel
--------------------------------- */
.business_details_scene {
  width: min(43.125vw, 828px);
  height: min(45vw, 857px);
  margin-left: auto;
  margin-right: auto;
  position: relative;
  perspective: min(62.5vw, 1200px);
  display: grid;
  place-items: center;
  transform: rotate(-30deg);
  overflow: visible;
  
  --carousel-compensate-scale: 1.33;
  --carousel-compensate-scale-negative: calc(1/1.33);
}

.business_details_carousel {
  position: relative;
  width: 100%;
  top: 0;
  right: -5%;
  height: 100%;
  transform: scale(var(--carousel-compensate-scale));
  transform-origin: center center;
}

.business_details_carousel > .card {
  /* fallback values */
  width: min(17.7083333333vw, 340px);
  height: min(23.5166666667vw, 451.52px);
  margin-top: calc(min(23.5166666667vw, 451.52px) / -2);
  margin-left: calc(min(17.7083333333vw, 340px) / -2);

  position: absolute;
  top: 50%;
  left: 50%;

  opacity: 0;
  transition: none;

  /* modern values */
  --card-w: min(17.7083333333vw, 340px);
  --card-h: calc(var(--card-w) * 1.328);

  width: var(--card-w, 340px);
  height: var(--card-h, 451.52px);
  margin-top: calc(var(--card-h, 451.52px) / -2);
  margin-left: calc(var(--card-w, 340px) / -2);
}

.business_details_carousel .card > *  {
  zoom: var(--carousel-compensate-scale-negative);
}

.business_details_carousel.is-ready > .card {
  transition:
    transform 900ms cubic-bezier(.22, .61, .36, 1),
    opacity 500ms ease,
    filter 900ms cubic-bezier(.22, .61, .36, 1);
}

.business_details_carousel .card .button {
  opacity: 0;
  pointer-events: none;
  transition: opacity 900ms cubic-bezier(.22, .61, .36, 1);
}

.business_details_carousel .card.is-front .button {
  opacity: 1;
  pointer-events: auto;
}

@media (max-width: 834px) {
  .business_details_scene {
    max-width: 100vw;

    /* fallback */
    height: 560px;

    /* modern */
    aspect-ratio: 1 / 1.08;
  }

  .business_details_carousel > .card {
    /* fallback */
    width: 300px;
    height: 447.02px;
    margin-top: -223.51px;
    margin-left: -150px;

    /* modern */
    --card-w: 75.12vw;
    --card-h: calc(var(--card-w) * 1.4900662252);

    width: 300px;
    width: var(--card-w, 300px);
    height: 447.02px;
    height: var(--card-h, 447.02px);
    margin-top: -223.51px;
    margin-top: calc(var(--card-h, 447.02px) / -2);
    margin-left: -150px;
    margin-left: calc(var(--card-w, 300px) / -2);
  }

  .card {
    font-size: 24px;
  }
}