/* Requested sticker-case compositions, measured from their Figma figures. */
.case--mascot .rounded,
.case--mascot .fig__slot { border-radius: 16px; }
.case--mascot .mascot-posts .crop { border-radius: 8px !important; }
.mascot-phone-row { display: flex; align-items: flex-start; gap: 1.6%; width: 100%; }
.mascot-phone-row .tg-phone { width: 32.2143%; flex: none; aspect-ratio: 322.143 / 701.653; border-radius: 30.022px; }
.mascot-telegram-desktop .slider__stage { contain: layout paint; }
.vesla-collection { position: relative; width: 100%; aspect-ratio: 1000 / 1063; }
.vesla-collection > img { position: absolute; left: var(--x); top: var(--y); width: var(--w); height: var(--h); object-fit: contain; }
.vesla-hero > img { align-self: flex-start; }

@media (max-width: 959px) {
  .case--mascot .rounded,
  .case--mascot .fig__slot { border-radius: 4px; }
  .mascot-hero {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    aspect-ratio: auto !important;
  }
  .mascot-hero > div {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1;
  }
  .mascot-hero > div:first-child {
    grid-column: 1;
    grid-row: 1 / 3;
    aspect-ratio: 167.5 / 276.621;
    align-self: center;
  }
  .mascot-hero > div:nth-child(2),
  .mascot-hero > div:nth-child(3) { grid-column: 2; }
  .mascot-hero > div:not(:first-child) img {
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    transform: none !important;
  }
  .mascot-posts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    aspect-ratio: auto !important;
  }
  .mascot-posts > div {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 167.5 / 227.372;
  }
  .case--mascot .mascot-posts .crop { border-radius: 2.145px !important; }
  .mascot-presenter {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    justify-items: center;
    aspect-ratio: auto !important;
  }
  .mascot-presenter > * {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1;
  }
  .mascot-presenter > .crop {
    grid-column: 1 / -1;
    width: 128px !important;
    height: 128px !important;
    border-radius: 16.516px;
  }
  .mascot-presenter > img:last-child { grid-column: 1 / -1; width: calc((100% - 8px) / 2) !important; }
  .mascot-telegram-mobile .slider__phones .tg-phone { width: 100%; border-radius: 31.914px; }
  .vesla-telegram-mobile .tg { width: 100%; max-width: none; }
  .vesla-telegram-mobile .slider__foot { display: none; }
}
@media (max-width: 959px) {
  .mascot-telegram-desktop,
  .case--vesla .phones.d-only { display: none; }
}