.hero-phone {
  position: relative;
  width: min(100%, 430px);
  justify-self: center;
  padding: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
}

.hero-phone::before {
  width: 390px;
  height: 390px;
  left: -105px;
  top: 240px;
  background: rgba(65, 192, 242, 0.16);
  filter: blur(2px);
}

.hero-phone img {
  display: block;
  width: 100%;
  border-radius: 0;
  filter: drop-shadow(0 30px 38px rgba(13, 81, 140, 0.22));
}

.screen-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  align-items: start;
}

.screen-grid figure {
  margin: 0;
  padding: 10px;
  border: 1px solid rgba(207, 227, 240, 0.9);
  border-radius: 26px;
  background: #fff;
  box-shadow: 0 18px 42px rgba(13, 81, 140, 0.12);
}

.screen-grid img {
  display: block;
  width: 100%;
  border-radius: 18px;
}

.screen-grid figcaption {
  padding: 13px 5px 8px;
  color: var(--primary);
  font-size: 0.95rem;
  font-weight: 800;
  text-align: center;
}

@media (max-width: 900px) {
  .hero-phone { width: 360px; }
  .screen-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 650px) {
  .hero-phone { width: 310px; }
  .screen-grid {
    display: flex;
    overflow-x: auto;
    gap: 14px;
    padding: 8px 2px 22px;
    scroll-snap-type: x mandatory;
  }
  .screen-grid figure {
    flex: 0 0 275px;
    scroll-snap-align: center;
  }
}