.product-hero {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 3rem;
    padding-bottom: clamp(4rem, 8vw, 7rem);
}

.product-mark {
    display: grid;
    width: clamp(9rem, 20vw, 15rem);
    aspect-ratio: 1;
    border-radius: 28%;
    background: var(--accent);
    box-shadow: var(--shadow);
    place-items: center;
    transform: rotate(4deg);
}
.product-mark span { color: white; font-size: clamp(4rem, 10vw, 8rem); font-weight: 850; transform: rotate(-4deg); }

.status { display: inline-flex; margin-top: 1rem; padding: .45rem .7rem; border: 1px solid var(--line); border-radius: 999px; color: var(--text); font-size: .8rem; font-weight: 700; }
.screenshots { padding-bottom: clamp(4rem, 9vw, 8rem); }
.screenshots-heading { max-width: 46rem; margin-bottom: 2rem; }
.screenshots-heading h2 { margin-bottom: 1rem; }

.screenshot-card {
    overflow: hidden;
    margin: 0;
    border: 1px solid var(--line);
    border-radius: 1.1rem;
    background: var(--surface);
    box-shadow: var(--shadow);
}

.screenshot-card-game {
    max-width: 59.25rem;
    margin-inline: auto;
}

.game-screenshot-viewport { background: #0e151c; }
.game-screenshot-viewport img { display: block; width: 100%; height: auto; }

.screenshot-card-game figcaption {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    padding: 1rem 1.2rem;
}

.screenshot-card-game figcaption span { color: var(--muted); font-size: .88rem; }

.screenshot-card-hint {
    display: grid;
    grid-template-columns: minmax(14rem, .55fr) minmax(0, 1.45fr);
    align-items: center;
    gap: clamp(1.2rem, 4vw, 3rem);
    margin-top: 1rem;
    padding: clamp(1.2rem, 3vw, 2rem);
}

.screenshot-card-hint h3 { margin: .45rem 0 .6rem; font-size: 1.15rem; }
.screenshot-card-hint p { margin: 0; font-size: .9rem; }
.screenshot-card-hint img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: .65rem; }
.features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.features h2 { margin: .65rem 0; font-family: inherit; font-size: 1.2rem; }
.feature-number { color: var(--accent); font-size: .72rem; font-weight: 800; letter-spacing: .12em; }

@media (max-width: 680px) {
    .product-hero { grid-template-columns: 1fr; }
    .product-mark { grid-row: 1; width: 7rem; transform: none; }
    .product-mark span { transform: none; }
    .screenshot-card-hint { grid-template-columns: 1fr; }
    .screenshot-card-game figcaption { align-items: flex-start; flex-direction: column; gap: .3rem; }
    .features { grid-template-columns: 1fr; }
}