/* Explain: Editorial spacing, grids, and image treatments */
.section-pad {
    padding-block: clamp(4rem, 8vw, 8rem);
}

.container-wide {
    width: min(100% - 2rem, 1240px);
    margin-inline: auto;
}

.container-narrow {
    width: min(100% - 2rem, 920px);
    margin-inline: auto;
}

.magazine-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 768px) {
    .magazine-grid {
        grid-template-columns: 1.15fr 0.85fr;
        gap: 1.5rem;
    }
}

@media (min-width: 1024px) {
    .magazine-grid {
        grid-template-columns: 1.35fr 0.75fr 0.9fr;
        gap: 1.75rem;
    }
}

.hero-frame {
    min-height: clamp(26rem, 68vh, 44rem);
    overflow: hidden;
    border-radius: 0 0 2.75rem 2.75rem;
}

.image-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.offset-card-up {
    transform: translateY(0);
}

@media (min-width: 1024px) {
    .offset-card-up {
        transform: translateY(-3rem);
    }
}

.anchor-offset {
    scroll-margin-top: 6rem;
}