.media-grid-title-box {
    display: flex;
    justify-content: space-between;
}

.media-grid__title {
    margin-bottom: 30px;
}

@media (min-width: 750px) {
    .media-grid__title {
        margin-bottom: 30px !important;
        overflow: hidden;
    }
}

.media-grid__wrapper {
    --media-grid-gap: 1rem;
    --media-grid-column-count: 12;
    align-items: start;
    gap: var(--media-grid-gap);
    display: grid;
    grid-auto-flow: row dense;
    grid-template-columns: repeat(var(--media-grid-column-count), minmax(0, 1fr));
}

.media-grid-item {
    grid-column: span var(--media-grid-item-mobile-column-span, 12);
    min-width: 0;
    container-type: inline-size;
}

.media-grid-item__title {
    margin-bottom: 16px;
}

@media screen and (min-width: 700px) {
    .media-grid__wrapper {
        --media-grid-column-count: 12;
    }

    .media-grid-item {
        grid-column: span var(--media-grid-item-column-span);
    }
}

.content-over-media {
    --content-over-media-gap: 1.5rem;
    --content-over-media-calculated-row-gap: var(--content-over-media-row-gap,
            var(--content-over-media-gap));
    --content-over-media-calculated-column-gap: var(--content-over-media-column-gap,
            var(--content-over-media-gap));
    grid-template:
        [full-start] 0 [content-start] minmax(0, 1fr) [content-end] 0 [full-end] / [full-start] minmax(0, 1fr) [content-start] minmax(0,
            min(var(--page-width),
                100% - var(--content-over-media-column-gap,
                    var(--content-over-media-gap, var(--container-gutter))) * 2)) [content-end] minmax(0, 1fr) [full-end];
    row-gap: var(--content-over-media-calculated-row-gap);
    column-gap: var(--content-over-media-calculated-column-gap);
    min-height: var(--content-over-media-height, auto);
    place-items: center;
    display: grid;
    position: relative;
    overflow: hidden;
}

.content-over-media:before {
    content: "";
    background: var(--content-over-media-gradient-overlay,
            rgba(var(--content-over-media-overlay)));
    border-radius: inherit;
    z-index: 1;
    pointer-events: none;
    position: absolute;
    inset: 0;
}

.content-over-media>image-parallax picture {
    display: contents;
}

.media-grid .content-over-media>picture {
    display: block;
    grid-area: full-start / full-start / full-end / full-end;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

.media-grid .content-over-media>picture>img {
    display: block;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    max-width: 100%;
    max-height: 100%;
}

.media-grid-item__image img {
    max-width: 100%;
}

.media-grid-item__image img,
.content-over-media img,
.content-over-media>picture img,
.content-over-media>image-parallax img {
    height: var(--content-over-media-height, auto);
    overflow-wrap: anywhere;
    object-fit: var(--media-grid-image-fit, cover);
    object-position: center;
    border-radius: inherit;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    grid-area: full-start / full-start / full-end / full-end;
    min-width: 100%;
    min-height: 100%;
    max-height: 100%;
}

.content-over-media> :not(img, video, iframe, svg, video-media, picture, image-parallax) {
    max-width: var(--content-over-media-content-max-width, 48rem);
    z-index: 1;
    text-shadow: 0 1px rgb(var(--content-over-media-text-shadow) / 50%);
    grid-area: content-start / content-start / content-end / content-end;
    position: relative;
}

.content-over-media:has(> .prose):not(:has(> .prose .button:last-child)) {
    row-gap: calc(var(--content-over-media-calculated-row-gap) - 0.5rem);
}

@supports (row-gap: 1lh) {
    .content-over-media:has(> .prose):not(:has(> .prose .button:last-child)) {
        row-gap: calc(var(--content-over-media-calculated-row-gap) - 0.5lh);
    }
}

.content-over-media>video-media:not([autoplay])~ :not(img, video, iframe, svg, video-media, picture, image-parallax) {
    pointer-events: none;
    transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
}

.content-over-media>video-media:not([autoplay])[loaded]~ :not(img, video, iframe, svg, video-media, picture, image-parallax) {
    opacity: 0;
    visibility: hidden;
}

.content-over-media .media-grid__content {
    color: var(--text-color);
    display: flex;
    gap: 1rem;
    width: 100%;
}

.content-over-media .media-grid__content.media-grid__text-align--left {
    text-align: start;
}

.content-over-media .media-grid__content.media-grid__text-align--center {
    text-align: center;
}

.content-over-media .media-grid__content.media-grid__text-align--right {
    text-align: end;
}

/* Compatibility for blocks that saved the previous justify option. */
.content-over-media .media-grid__content.media-grid__text-align--justify {
    text-align: start;
}

.content-over-media .media-grid__content--column {
    flex-direction: column;
}

.content-over-media .media-grid__content--row {
    flex-direction: row;
}

.content-over-media .media-grid__distribution--start {
    justify-content: flex-start;
}

.content-over-media .media-grid__distribution--center {
    justify-content: center;
}

.content-over-media .media-grid__distribution--end {
    justify-content: flex-end;
}

.content-over-media .media-grid__distribution--between {
    justify-content: space-between;
}

.content-over-media .media-grid__content--column.media-grid__distribution--between {
    box-sizing: border-box;
    height: 100%;
    min-height: 100%;
    padding-block: var(--content-over-media-gap);
}

.content-over-media .media-grid__content--row.media-grid__vertical-align--start {
    align-items: flex-start;
}

.content-over-media .media-grid__content--row.media-grid__vertical-align--center {
    align-items: center;
}

.content-over-media .media-grid__content--row.media-grid__vertical-align--end {
    align-items: flex-end;
}

.content-over-media .media-grid__heading,
.content-over-media .media-grid__body {
    min-width: 0;
}

.content-over-media .media-grid__content--row .media-grid__heading,
.content-over-media .media-grid__content--row .media-grid__body {
    max-width: 50%;
}

.content-over-media .media-grid__heading>*,
.content-over-media .media-grid__body>* {
    margin-bottom: .5rem;
}

.content-over-media .media-grid__heading>*:last-child,
.content-over-media .media-grid__body>*:last-child {
    margin-bottom: 0;
}

.content-over-media .media-grid__content .media-grid-item-btn {
    position: relative;
}

.content-over-media .media-grid-item-btn:after {
    background-color: var(--text-color);
    bottom: -3px;
    content: "";
    height: 1px;
    left: 0;
    position: absolute;
    right: 0;
    transform: scaleX(0);
    transition: transform .25s cubic-bezier(.215, .61, .355, 1);
}

.group:hover .media-grid-item-btn:after {
    transform: scaleX(1);
}

.content-over-media:has(video-media:not([autoplay])) .play-button {
    transition: transform 0.2s ease-in-out;
}

.content-over-media:has(video-media:not([autoplay])):hover .play-button {
    transform: scale(1.1);
}

.shopify-section:first-child [allow-transparent-header]>.content-over-media> :not(img, video, iframe, svg, video-media, picture, image-parallax) {
    padding-block-start: var(--header-height, 0px);
}

.content-over-media--xs {
    --content-over-media-height: clamp(15rem, 65vw, 25rem);
}

.content-over-media--sm {
    --content-over-media-height: clamp(20rem, 85vw, 32rem);
}

.content-over-media--md {
    --content-over-media-height: clamp(25rem, 100vw, 36rem);
}

.content-over-media--lg {
    --content-over-media-height: clamp(30rem, 125vw, 42rem);
}

.content-over-media--fill {
    --content-over-media-height: calc(100vh - var(--sticky-area-height));
}

.content-over-media--adapt {
    --media-grid-image-fit: contain;
    aspect-ratio: var(--media-grid-natural-ratio, auto);
    min-height: 0;
}

.content-over-media--square> :is(img, svg, video-media),
.content-over-media--square {
    aspect-ratio: 1 / 1;
}

.content-over-media--portrait,
.content-over-media--portrait> :is(img, svg, video-media) {
    aspect-ratio: 4 / 5;
}

.content-over-media--portrait-tall,
.content-over-media--portrait-tall> :is(img, svg, video-media) {
    aspect-ratio: 2 / 3;
}

.content-over-media--portrait-extra-tall,
.content-over-media--portrait-extra-tall> :is(img, svg, video-media) {
    aspect-ratio: 1 / 2;
}

.content-over-media--landscape,
.content-over-media--landscape> :is(img, svg, video-media) {
    aspect-ratio: 4 / 3;
}

.content-over-media--landscape-classic,
.content-over-media--landscape-classic> :is(img, svg, video-media) {
    aspect-ratio: 3 / 2;
}

.content-over-media--wide,
.content-over-media--wide> :is(img, svg, video-media) {
    aspect-ratio: 16 / 9;
}

.content-over-media--banner,
.content-over-media--banner> :is(img, svg, video-media) {
    aspect-ratio: 2 / 1;
}

.content-over-media--banner-wide,
.content-over-media--banner-wide> :is(img, svg, video-media) {
    aspect-ratio: 3 / 1;
}

@media screen and (max-width: 699px) {
    .content-over-media--mobile-adapt {
        --media-grid-image-fit: contain;
        aspect-ratio: var(--media-grid-mobile-natural-ratio, var(--media-grid-natural-ratio, auto));
        min-height: 0;
    }

    .content-over-media:is(.content-over-media--mobile-square,
        .content-over-media--mobile-portrait,
        .content-over-media--mobile-portrait-tall,
        .content-over-media--mobile-portrait-extra-tall,
        .content-over-media--mobile-landscape,
        .content-over-media--mobile-landscape-classic,
        .content-over-media--mobile-wide,
        .content-over-media--mobile-banner,
        .content-over-media--mobile-banner-wide) {
        --media-grid-image-fit: cover;
    }

    .content-over-media--mobile-square {
        aspect-ratio: 1 / 1;
    }

    .content-over-media--mobile-portrait {
        aspect-ratio: 4 / 5;
    }

    .content-over-media--mobile-portrait-tall {
        aspect-ratio: 2 / 3;
    }

    .content-over-media--mobile-portrait-extra-tall {
        aspect-ratio: 1 / 2;
    }

    .content-over-media--mobile-landscape {
        aspect-ratio: 4 / 3;
    }

    .content-over-media--mobile-landscape-classic {
        aspect-ratio: 3 / 2;
    }

    .content-over-media--mobile-wide {
        aspect-ratio: 16 / 9;
    }

    .content-over-media--mobile-banner {
        aspect-ratio: 2 / 1;
    }

    .content-over-media--mobile-banner-wide {
        aspect-ratio: 3 / 1;
    }
}

@media screen and (min-width: 700px) {
    .content-over-media {
        --content-over-media-gap: 1.5rem;
    }
}

@media screen and (min-width: 1000px) {
    .content-over-media {
        --content-over-media-gap: 2rem;
    }
}

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

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

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

.justify-start {
    justify-content: start;
}

.justify-center {
    justify-content: safe center;
}

.justify-end {
    justify-content: end;
}

.justify-between {
    justify-content: space-between;
}

.justify-evenly {
    justify-content: space-evenly;
}

.justify-items-start {
    justify-items: start;
}

.justify-items-center {
    justify-items: safe center;
}

.justify-items-end {
    justify-items: end;
}

.justify-self-start {
    justify-self: start;
}

.justify-self-center {
    justify-self: center;
}

.justify-self-end {
    justify-self: end;
}

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

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

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

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

.align-self-start {
    align-self: start;
}

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

.align-self-end {
    align-self: end;
}

.place-self-start {
    place-self: start;
}

.place-self-start-center {
    place-self: start center;
}

.place-self-start-end {
    place-self: start end;
}

.place-self-center {
    place-self: center;
}

.place-self-center-start {
    place-self: center start;
}

.place-self-center-end {
    place-self: center end;
}

.place-self-end {
    place-self: end;
}

.place-self-end-start {
    place-self: end start;
}

.place-self-end-center {
    place-self: end center;
}