.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: 2;
    align-items: start;
    gap: var(--media-grid-gap);
    grid: auto-flow dense var(--media-grid-row-height) / repeat(var(--media-grid-column-count),
            minmax(0, 1fr));
    display: grid;
}

.media-grid-item {
    grid-area: span min(2, var(--media-grid-item-row-span)) / span 2;
    height: 100%;
    container-type: inline-size;
}

.media-grid-item>* {
    height: 100%;
}
.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-area: span var(--media-grid-item-row-span) / span var(--media-grid-item-column-span);
    }
}

.content-over-media {
    --content-over-media-gap: .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>picture,
.content-over-media>image-parallax picture {
    display: contents;
}
.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: 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)
}

.content-over-media .media-grid__content > * {
    margin-bottom: .5rem
}

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

.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--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--landscape,
.content-over-media--landscape> :is(img, svg, video-media) {
    aspect-ratio: 4 / 3;
}

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

@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: 1.5rem;
    }
}

.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;
}

@media screen and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    .zoom-image {
        transform-origin: center;
        transition: scale .5s cubic-bezier(.25, .46, .45, .94);
    }

    .group:hover .group-hover\:zoom {
        scale: 1.02;
    }
}