.devices {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(26px, calc(38 * var(--u)), 50px) 0 0;
  background: var(--color-bg);
}

.devices__title {
  display: flex;
  justify-content: center;
}

/* Наклейка «до 100 устройств в подписке» — SVG по геометрии макета: у текста внешняя
   обводка со скруглёнными углами, CSS-обводка текста даёт на «1» острые шипы */
.devices__sticker {
  width: min(calc(291 * var(--u)), 407px);
  overflow: visible;
}

/* Обводка и заливка — два слоя <use>: Safari красит обводку и заливку SVG-текста по буквам,
   и обводка следующей буквы закрывает предыдущую. Шрифт задаём самим <use> — копии наследуют его */
.devices__sticker use {
  font-family: var(--font-display);
  font-weight: 800;
  text-anchor: middle;
}

.devices__sticker-prefix {
  text-anchor: start;
}

.devices__sticker-stroke {
  fill: var(--color-black);
  stroke: var(--color-black);
  stroke-linejoin: round;
}

.devices__sticker-count {
  font-size: 100px;
  letter-spacing: 2px;
}

.devices__sticker-prefix,
.devices__sticker-caption {
  font-size: 16px;
  letter-spacing: -0.64px;
}

.devices__sticker-stroke .devices__sticker-count {
  stroke-width: 24px;
}

.devices__sticker-stroke .devices__sticker-prefix {
  stroke-width: 12px;
}

.devices__sticker-stroke .devices__sticker-caption {
  stroke-width: 16px;
}

.devices__sticker-fill {
  fill: var(--color-white);
}

.devices__sticker-fill .devices__sticker-prefix {
  fill: var(--color-bg);
}

.devices__text {
  margin-top: clamp(10px, calc(13 * var(--u)), 18px);
  padding-inline: 20px;
  font-size: var(--fs-body);
  line-height: 1.35;
  letter-spacing: 0.02em;
  text-align: center;
  color: var(--color-ink-40);
}

.devices__tabs {
  margin-top: clamp(16px, calc(20 * var(--u)), 24px);
}

.devices__panels {
  display: grid;
  width: 100%;
  max-width: 620px;
  margin-top: clamp(22px, calc(28 * var(--u)), 36px);
  padding-inline: clamp(12px, calc(20 * var(--u)), 32px);
}

.devices__panel {
  grid-area: 1 / 1;
  min-width: 0;
}

.devices__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-content: start;
  column-gap: clamp(6px, calc(9 * var(--u)), 16px);
  row-gap: clamp(18px, calc(26 * var(--u)), 32px);
}

.devices__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  text-align: center;
}

.devices__panel_active .devices__item,
.no-js .devices__item {
  animation: devices-in 0.7s var(--ease-back) both;
  animation-delay: calc(var(--i) * 45ms);
}

.devices__card {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 127 / 90;
  border-radius: clamp(14px, calc(20 * var(--u)), 26px);
  background: radial-gradient(227% 185% at 50% 4%, rgb(128 128 128 / 0.01) 22%, rgb(158 158 158 / 0.32) 42%, rgb(158 158 158 / 0.56) 56%), rgb(255 255 255 / 0.8);
  box-shadow: 0 4px 8px -6px rgb(9 9 9 / 0.15);
  transition: transform 0.45s var(--ease-back);
}

@media (hover: hover) {
  .devices__item:hover .devices__card {
    transform: translateY(-4px) rotate(-2deg);
  }
}

/* Картинка абсолютная: иначе её собственная высота распирает карточку с aspect-ratio.
   Положение и ширина у каждой своя (в разметке): подогнаны под видимый размер устройства в макете */
.devices__image {
  position: absolute;
  top: var(--y);
  left: var(--x);
  width: var(--w);
  max-width: none;
  height: auto;
  filter: drop-shadow(0 6px 6px rgb(0 0 0 / 0.12));
}

.devices__name {
  margin-top: clamp(12px, calc(17 * var(--u)), 20px);
  font-family: var(--font-display);
  font-size: clamp(14px, calc(19 * var(--u)), 24px);
  line-height: 1;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.devices__system {
  width: auto;
  height: clamp(9px, calc(11 * var(--u)), 14px);
  margin-top: clamp(6px, calc(8 * var(--u)), 10px);
}

.devices__system_text {
  height: auto;
  font-size: clamp(12px, calc(14 * var(--u)), 16px);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--color-ink-30);
}

.devices__logo {
  position: absolute;
  inset: 0;
  width: auto;
  height: 52%;
  margin: auto;
  max-width: 70%;
  object-fit: contain;
}

.devices__logo_raster {
  height: 46%;
}

.devices__logo_wordmark {
  height: 19%;
  max-width: 58%;
}

/* Во вкладке OS восемь карточек: последний ряд из двух стоит по центру, как в макете */
.devices__grid_os {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.devices__grid_os .devices__item {
  grid-column: span 2;
}

.devices__grid_os .devices__item:nth-child(7) {
  grid-column: 2 / span 2;
}

.devices__thumbs {
  display: flex;
  justify-content: center;
  margin-top: clamp(12px, calc(17 * var(--u)), 20px);
}

/* Светлые стеклянные кружки 35 px, картинка почти во весь круг, соседние заходят друг на друга */
.devices__thumb {
  width: clamp(28px, calc(35 * var(--u)), 44px);
  aspect-ratio: 1;
  padding: clamp(2px, calc(3 * var(--u)), 4px);
  border: 1.5px solid rgb(0 0 0 / 0.08);
  border-radius: 50%;
  object-fit: contain;
  background: radial-gradient(90% 90% at 50% 25%, #ffffff 0%, #efefef 55%, #e2e2e2 100%);
  box-shadow: 0 2px 4px -2px rgb(0 0 0 / 0.2);
}

.devices__thumb + .devices__thumb {
  margin-left: calc(clamp(28px, calc(35 * var(--u)), 44px) * -0.31);
}

@keyframes devices-in {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.92);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 767px) {
  .devices {
    margin-top: calc(-105 * var(--u));
    border-radius: calc(105 * var(--u)) calc(105 * var(--u)) 0 0;
  }
}

@media (min-width: 768px) {
  .devices {
    padding: 48px 0 44px;
  }
}