.container {
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--section-px);
}

.container--wide {
    max-width: var(--container-wide);
}

.container--narrow {
    max-width: var(--container-narrow);
}

/* Grid utilities */
.grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-8);
}

.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-8);
}

.grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-8);
}

.grid-asymmetric {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: var(--space-12);
}

@media (max-width: 768px) {

    .grid-2,
    .grid-3,
    .grid-4,
    .grid-asymmetric {
        grid-template-columns: 1fr;
    }
}

/* Section utilities */
.section {
    padding-block: var(--section-py);
}

.site-main {
    padding-bottom: 0;
}

.section--bg {
    background-color: var(--color-bg);
}

.section--alt {
    background-color: var(--color-bg-alt);
}

.section--white {
    background-color: var(--color-white);
}

.section--dark {
    background-color: var(--color-bg-dark);
    color: var(--color-white);
}

.section--primary {
    background-color: var(--color-primary);
    color: var(--color-white);
}

.section--primary-deep {
    background-color: var(--color-primary-deep);
    color: var(--color-white);
}

/* Legacy aliases for transition */
.section--cream {
    background-color: var(--color-bg);
}

.section--parchment {
    background-color: var(--color-bg-alt);
}

.section--saffron {
    background-color: var(--color-primary);
    color: var(--color-white);
}

.section--earth {
    background-color: var(--color-bg-dark);
    color: var(--color-white);
}

.align-center {
    align-items: center;
}

.text-center {
    text-align: center;
}

/* Responsive Utilities */
.grid-gap-responsive {
    gap: var(--space-16);
}

.img-responsive-height {
    width: 100%;
    height: 600px;
    object-fit: cover;
    display: block;
}

@media (max-width: 991px) {
    .grid-gap-responsive {
        gap: var(--space-8) !important;
    }

    .img-responsive-height {
        height: 400px !important;
    }
}

@media (max-width: 768px) {
    .grid-gap-responsive {
        gap: var(--space-6) !important;
    }

    .img-responsive-height {
        height: 300px !important;
    }
}