.mediaSection { margin-top: var(--spacing-xl); }
.mediaSection.std-spacing { margin-top: var(--spacing-xl); }

.mediaSectionSingle img {
    grid-column: 1 / -1;
}

.mediaSectionLeft img,
.mediaSectionRight img {
    grid-column: span 1;
}

.mediaSectionRight img {
    grid-column-start: 2;
}

.mediaSectionTriple {
    row-gap: var(--spacing-xl);
}

.mediaSectionTriple img {
    grid-column: span 1;
    grid-row: span 1;
}

.mediaSectionTriple img:first-of-type {
    grid-column: span 1;
    grid-row: span 2;
    height: 100%;
    max-height: unset;
}

.mediaSectionTriple img:last-of-type {
    align-self: end;
}

@media (max-width: 1024px) {
    .mediaSection.std-spacing { margin-top: var(--spacing-lg); }
    .mediaSection.std-spacing.mediaSectionDouble,
    .mediaSection.std-spacing.mediaSectionTriple { row-gap: var(--spacing-lg); }

    .mediaSection.mediaSectionTriple {
        margin-top: var(--spacing-4xl);
    }

    .mediaSectionLeft,
    .mediaSectionRight {
        margin-top: var(--spacing-xl);
    }

    .mediaSection img,
    .mediaSectionTriple img:first-of-type {
        grid-column: span 2;
        grid-row: span 1;
        aspect-ratio: var(--aspect-16-9);
    }

    .mediaSectionRight img {
        grid-column-start: 1 span 2;
    }
}

@media (max-width: 767px) {
    .mediaSection.std-spacing { margin-top: var(--spacing-md); }
    .mediaSection.std-spacing.mediaSectionTriple { margin-top: var(--spacing-md); }
    .mediaSection.std-spacing.mediaSectionDouble {
        margin-top: var(--spacing-xl);
        row-gap: var(--spacing-xl);
    }
    


    .mediaSection.mediaSectionTriple {
        row-gap: var(--spacing-md);
    }
}