@import url("styles-base.css");

.phone-speaker {
  top: 0;
  transform: translate(-50%, -8px);
}

.phone--screenshot {
  overflow: hidden;
  border: 0;
  background: transparent;
  box-shadow: 0 24px 55px rgba(15, 23, 42, 0.22);
}

.phone--hero.phone--screenshot,
.phone--small.phone--screenshot {
  aspect-ratio: 1220 / 2712;
}

.phone--hero.phone--screenshot {
  border-radius: 28px;
}

.phone--small.phone--screenshot {
  border-radius: 22px;
}

.phone--screenshot .phone-screen,
.phone-screen--screenshot {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border-radius: inherit;
  background: var(--background);
}

.game-screenshot {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.screen-card--screenshot {
  align-content: start;
}

@media (max-width: 519px) {
  .screens-grid {
    grid-auto-flow: column;
    grid-auto-columns: minmax(270px, 86vw);
    grid-template-columns: none;
    overflow-x: auto;
    padding: 4px 4px 18px;
    margin-inline: -4px;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
  }

  .screen-card--screenshot {
    scroll-snap-align: center;
  }
}