.banners_main_container .home-banners {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.home-sale-banner {
  display: block;
  container-type: inline-size;
  aspect-ratio: 920 / 410;
  border-radius: 20px;
  color: #fff;
}

.home-sale-banner__art {
  /* One design pixel in the 920 px artboard. */
  --unit: calc(100cqw / 920);
  position: relative;
  display: block;
  height: 100%;
  overflow: hidden;
  border-radius: inherit;
  background:
    url("sale-room-ochre.webp") calc(328 * var(--unit)) calc(-148 * var(--unit)) / calc(617 * var(--unit)) calc(617 * var(--unit)) no-repeat,
    #e85a4a;
  font-family: "FactorA", sans-serif;
  font-weight: 700;
  line-height: 1;
}

.home-sale-banner__art > span { position: absolute; }

.home-sale-banner__circle {
  left: calc(-125 * var(--unit));
  top: calc(-121 * var(--unit));
  width: calc(606 * var(--unit));
  height: calc(614 * var(--unit));
  border-radius: 50%;
  background: #eb673b;
}

.home-sale-banner__title {
  left: calc(50 * var(--unit));
  top: calc(47 * var(--unit));
  font-size: calc(52 * var(--unit));
  letter-spacing: -0.12em;
  text-transform: uppercase;
}

.home-sale-banner__number {
  left: calc(85.34 * var(--unit));
  top: calc(82 * var(--unit));
  font-size: calc(280.74 * var(--unit));
  letter-spacing: -0.15em;
}

.home-sale-banner__up-to,
.home-sale-banner__percent {
  font-family: "PlayfairDisplay", serif;
  font-weight: 400;
  font-style: italic;
  letter-spacing: -0.1em;
}

.home-sale-banner__up-to {
  left: calc(21.55 * var(--unit));
  top: calc(179 * var(--unit));
  font-size: calc(45.24 * var(--unit));
  text-transform: uppercase;
}

.home-sale-banner__up-to::after {
  content: "";
  position: absolute;
  left: calc(-21.55 * var(--unit));
  top: calc(63.58 * var(--unit));
  width: calc(78.44 * var(--unit));
  height: calc(31.03 * var(--unit));
  background: #fff;
}

.home-sale-banner__percent {
  left: calc(369.8 * var(--unit));
  top: calc(179 * var(--unit));
  font-size: calc(144.54 * var(--unit));
}

.home-sale-banner__caption {
  left: calc(50 * var(--unit));
  top: calc(341 * var(--unit));
  font-size: calc(20 * var(--unit));
}

.home-sale-banner__caption-mobile { display: none; }

.home-sale-banner:focus-visible {
  outline: 3px solid #2e2a47;
  outline-offset: 2px;
}

.home-social-banner {
  container-type: inline-size;
  aspect-ratio: 920 / 410;
  border-radius: 20px;
}

.home-social-banner__art {
  /* Scale the 240 px high artwork to the same height as the sale banner. */
  --unit: calc(100cqw * 410 / 920 / 240);
  position: relative;
  isolation: isolate;
  height: 100%;
  overflow: hidden;
  border-radius: inherit;
  background: #e8e2d5;
  color: #2e2a47;
  font-family: "FactorA", sans-serif;
  font-weight: 700;
}

.home-social-banner__art > * { position: absolute; }

.home-social-banner__vk-watermark,
.home-social-banner__telegram-watermark { mix-blend-mode: screen; }

.home-social-banner__vk-watermark {
  right: calc(32 * var(--unit));
  top: calc(105 * var(--unit));
  width: calc(225.454 * var(--unit));
}

.home-social-banner__telegram-watermark {
  right: calc(11 * var(--unit));
  top: calc(-4 * var(--unit));
  width: calc(103.841 * var(--unit));
}

.home-social-banner__arrow {
  right: calc(79.83 * var(--unit));
  top: calc(87.46 * var(--unit));
  width: calc(115.098 * var(--unit));
  transform: translate(50%, -50%) rotate(87.99deg) scaleY(-1);
}

.home-social-banner__title,
.home-social-banner__caption {
  left: calc(20 * var(--unit));
  margin: 0;
}

.home-social-banner__title {
  top: calc(20 * var(--unit));
  font-size: calc(16 * var(--unit));
  line-height: 1;
  letter-spacing: -0.1em;
  text-transform: uppercase;
}

.home-social-banner__title > * { display: block; }

.home-social-banner__title > em {
  margin-left: calc(57 * var(--unit));
  font-family: "PlayfairDisplay", serif;
  font-weight: 500;
}

.home-social-banner__title > span { margin-left: calc(27 * var(--unit)); }

.home-social-banner__caption {
  bottom: calc(20 * var(--unit));
  font-size: calc(10 * var(--unit));
  line-height: 1.4;
}

.home-social-banner__links {
  display: flex;
  right: calc(20 * var(--unit));
  bottom: calc(20 * var(--unit));
  gap: calc(7.875 * var(--unit));
}

.home-social-banner__links > a {
  display: grid;
  place-items: center;
  width: calc(45 * var(--unit));
  height: calc(45 * var(--unit));
  border-radius: calc(9 * var(--unit));
}

.home-social-banner__links img {
  display: block;
  width: calc(45 * var(--unit));
  height: auto;
}

.home-social-banner__links > a:focus-visible {
  outline: 2px solid #2e2a47;
  outline-offset: 2px;
}

.home-social-banner__max { background: #2e2a47; }

.home-social-banner__max img { width: calc(20 * var(--unit)); }

@media (max-width: 600px) {
  .banners_main_container .home-banners { grid-template-columns: minmax(0, 1fr); }

  .home-sale-banner,
  .home-social-banner {
    aspect-ratio: 355 / 240;
    border-radius: 18px;
  }

  .home-social-banner__art { --unit: calc(100cqw / 355); }

  .home-sale-banner__art {
    --unit: calc(100cqw / 355);
    background:
      url("sale-room-ochre.webp") calc(63 * var(--unit)) calc(-53 * var(--unit)) / calc(316 * var(--unit)) calc(316 * var(--unit)) no-repeat,
      #e85a4a;
  }

  .home-sale-banner__circle {
    left: calc(-172 * var(--unit));
    top: calc(-111 * var(--unit));
    width: calc(386.46 * var(--unit));
    height: calc(391.56 * var(--unit));
  }

  .home-sale-banner__title {
    left: calc(20.23 * var(--unit));
    top: calc(26 * var(--unit));
    font-size: calc(36 * var(--unit));
  }

  .home-sale-banner__number {
    left: calc(34 * var(--unit));
    top: calc(64 * var(--unit));
    font-size: calc(145 * var(--unit));
  }

  .home-sale-banner__up-to {
    left: calc(10.34 * var(--unit));
    top: calc(109 * var(--unit));
    font-size: calc(23.82 * var(--unit));
  }

  .home-sale-banner__up-to::after {
    left: calc(-11.34 * var(--unit));
    top: calc(33 * var(--unit));
    width: calc(35 * var(--unit));
    height: calc(17 * var(--unit));
  }

  .home-sale-banner__percent {
    left: calc(193.69 * var(--unit));
    top: calc(109 * var(--unit));
    font-size: calc(70 * var(--unit));
  }

  .home-sale-banner__caption { display: none; }

  .home-sale-banner__caption-mobile {
    display: block;
    left: calc(21 * var(--unit));
    top: calc(191 * var(--unit));
    font-size: calc(12 * var(--unit));
    line-height: 0.9;
  }
}
