/* Explain: Layout helpers for editorial bridal spacing and grids. */
.section-shell {
    width: min(100% - 2rem, 1240px);
    margin-inline: auto;
}

.section-padding {
    padding-block: clamp(4rem, 8vw, 7rem);
}

.hero-section {
    min-height: clamp(560px, 86vh, 900px);
}

.product-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem 1rem;
}

@media (min-width: 640px) {
    .product-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 2.5rem 1.5rem;
    }
}

@media (min-width: 1024px) {
    .product-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}