/* Retail Reality — responsive */

@media (max-width: 1199.98px) {
  .retail-reality__composition {
    height: clamp(400px, 54vh, 520px);
  }

  .retail-reality__float-card {
    width: min(250px, 36vw);
  }
}

@media (max-width: 991.98px) {
  .retail-reality {
    min-height: 0;
    padding: 56px 0 72px;
  }

  .retail-reality__composition {
    height: clamp(380px, 52vh, 480px);
    min-height: 360px;
  }

  .retail-reality__product {
    width: clamp(200px, 34vw, 260px);
  }

  .retail-reality__float-card {
    width: min(230px, 38vw);
    padding: 16px 18px;
  }

  .retail-reality__float-card--1 { left: 0; top: 4%; }
  .retail-reality__float-card--2 { right: 0; top: 2%; }
  .retail-reality__float-card--3 { left: 0; bottom: 2%; }
  .retail-reality__float-card--4 { right: 0; bottom: 0; }
  .retail-reality__float-card--5 { left: 4%; top: 34%; }
  .retail-reality__float-card--6 { right: 4%; top: 36%; }
  .retail-reality__float-card--8 { right: 2%; top: 52%; }
  .retail-reality__float-card--7 { left: 6%; top: 48%; }

  .retail-reality__card-evidence {
    width: clamp(90px, 16vw, 120px);
  }
}

@media (max-width: 767.98px) {
  .retail-reality {
    padding: 48px 0 64px;
  }

  .retail-reality__intro {
    margin-bottom: 28px;
  }

  .retail-reality__composition {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    height: auto;
    min-height: 0;
    padding-bottom: 8px;
  }

  .retail-reality__product {
    position: relative;
    left: auto;
    top: auto;
    width: min(240px, 62vw);
    transform: rotate(-3deg) !important;
    order: 1;
  }

  .retail-reality.is-in .retail-reality__product {
    transform: rotate(-3deg) !important;
  }

  .retail-reality__float-card {
    position: relative;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    width: 100%;
    max-width: 420px;
    order: 2;
    transform: none !important;
    transition-delay: 0s !important;
  }

  .retail-reality.is-in .retail-reality__float-card {
    transform: none !important;
  }

  .retail-reality__float-card.is-active {
    transform: scale(1.02) !important;
  }

  .retail-reality__card-evidence {
    position: relative;
    top: auto;
    left: auto !important;
    right: auto !important;
    width: 100%;
    max-width: 180px;
    margin: 14px auto 0;
    transform: translateY(8px) scale(0.98) !important;
  }

  .retail-reality__float-card.is-active .retail-reality__card-evidence {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1) !important;
  }
}