/* Product-screen composition: preserve the supplied phone mockups' natural aspect ratio. */
.screen-gallery {
  height: 510px;
  min-height: 0;
  overflow: hidden;
}

/* Let the phone composition meet the following section without an empty band. */
.showcase-section { padding-bottom: 0; }

.screen-gallery::before { bottom: 22px; }

.device-compatibility {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 25px 0 20px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.device-compatibility strong,
.device-compatibility small { display: block; }
.device-compatibility strong { color: var(--text); font-size: 12px; }
.device-compatibility small { color: #9897a7; }

.device-pair { position: relative; width: 56px; height: 37px; }
.device-tablet,
.device-phone {
  position: absolute;
  display: block;
  border: 1.5px solid #9b8cff;
  border-radius: 5px;
  background: linear-gradient(145deg, rgba(155,140,255,.24), rgba(38,32,80,.35));
  box-shadow: 0 0 18px rgba(128,105,255,.22);
}

.device-tablet { top: 1px; left: 1px; width: 42px; height: 29px; }
.device-phone { right: 1px; bottom: 0; width: 18px; height: 34px; }
.device-tablet i,
.device-phone i { position: absolute; right: 50%; bottom: 2px; width: 2px; height: 2px; border-radius: 50%; background: var(--primary-light); transform: translateX(50%); }

.screen-card {
  flex: 0 0 auto;
  width: auto;
  overflow: hidden;
}

.screen-card img {
  width: auto;
  height: 330px;
  max-width: none;
}

.screen-card-one {
  transform: translate(13px, 42px) rotate(-6deg);
  opacity: .72;
}

.screen-card-two { z-index: 2; width: auto; }
.screen-card-two img { height: 410px; }

.screen-card-three {
  transform: translate(-13px, 44px) rotate(6deg);
  opacity: .72;
}

@media (max-width: 640px) {
  .screen-gallery { height: 385px; min-height: 0; gap: 8px; }
  .screen-card { width: auto; }
  .screen-card img { width: auto; height: 245px; }
  .screen-card-two { width: auto; }
  .screen-card-two img { height: 305px; }
  .device-compatibility { margin: 21px 0 18px; }
}