/* Release artwork shares the changelog reading column and keeps its own stage. */
.changelog-feature {
    grid-column: 2;
    min-width: 0;
    margin: 0 0 1rem;
}

.changelog-feature + .changelog-feature {
    margin-top: 1.5rem;
}

.changelog-feature h3 {
    margin: 0 0 1rem;
    color: var(--text-dark);
    font-family: var(--font-heading);
    font-size: 1.375rem;
    font-weight: 500;
    line-height: 1.4;
}

.changelog-feature p {
    margin: 1.125rem 0 0;
    color: var(--text-muted);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    text-wrap: pretty;
}

.changelog-media {
    position: relative;
    margin: 0;
    overflow: hidden;
    aspect-ratio: 16 / 11;
    border-radius: 14px;
    background: #1a1918;
}

.changelog-media video,
.changelog-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.changelog-media video:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: -3px;
}

html[lang="ja"] .changelog-feature p {
    word-break: auto-phrase;
}

@media (max-width: 760px) {
    .changelog-feature { grid-column: 1; margin-bottom: .25rem; }
    .changelog-feature + .changelog-feature { margin-top: .75rem; }
    .changelog-feature h3 { font-size: 1.125rem; }
    .changelog-media { border-radius: 10px; }
}