div.wp-block-media-text,
div.wp-block-media-text[class*="is-style-section-"],
div.wp-block-media-text.has-background,
div.wp-block-media-text.has-media-on-the-right {
    gap: var(--wp--preset--spacing--60);
}

@media (min-width: 601px) {
    div.wp-block-media-text,
    div.wp-block-media-text[class*="is-style-section-"],
    div.wp-block-media-text.has-background,
    div.wp-block-media-text.has-media-on-the-right {
        gap: var(--wp--preset--spacing--80);
    }
}

/* Ensure block gap is applied to all child elements */
.wp-block-media-text__content > * {
    margin-top: var(--wp--style--block-gap);
}

.wp-block-media-text > .wp-block-media-text__content {
    padding: 0;

    & > :first-child {
        margin-top: 0;
    }

    & > :last-child {
        margin-bottom: 0;
    }
}

/* Add border radius to media text */
.wp-block-media-text__media,
.wp-block-media-text__media img {
    border-radius: var(--wp--custom--global--border--radius--base);
}

/* Add aspect ration to stretched media */
.wp-block-media-text.alignwide.is-image-fill-element .wp-block-media-text__media {
    aspect-ratio: 1;
    width: 100%;
}

@media (min-width: 782px) {
    .wp-block-media-text.alignwide.is-image-fill-element .wp-block-media-text__media {
        aspect-ratio: 5/6;
    }
}

/* Bordered media text */
.wp-block-media-text.is-style-bordered-media-text .wp-block-media-text__media {
    padding: 8px;
    background: var(--wp--preset--color--base-variant);
    border-radius: var(--wp--custom--global--border--radius--base);

    img {
        border-radius: var(--wp--custom--global--border--radius--base);
    }

}

.is-style-section-base-variant .wp-block-media-text.is-style-bordered-media-text .wp-block-media-text__media {
    background: var(--wp--preset--color--base);
}

.wp-block-media-text.is-image-fill-element.is-style-bordered-media-text > .wp-block-media-text__media img {
    width: calc(100% - 16px);
    height: calc(100% - 16px);
    object-fit: cover;
    object-position: center;
}

/* Create hero from group and media text as first blocks */
.is-root-container > :first-child.wp-block-group:has(.wp-block-media-text),
.wp-site-blocks > :first-child.wp-block-template-part + .wp-block-group:has(.wp-block-media-text),
.entry-content > :first-child.wp-block-group:has(.wp-block-media-text) {
    z-index: 0;
    padding-top: var(--wp--preset--spacing--50);
    padding-bottom: 0;
    &:after {
        content: '';
        display: block;
        width: 100%;
        height: var(--wp--preset--spacing--80);
        background: var(--wp--preset--color--base);
        position: absolute;
        bottom: 0;
        left: 0;
        top: auto !important;
        z-index: -1;
    }
    &:has(+ .is-style-section-base-variant):after {
        background: var(--wp--preset--color--base-variant);
    }
    &:has(+ .is-style-section-primary-shaped):after,
    &:has(+ .is-style-section-primary):after {
        background: var(--wp--preset--color--primary);
    }
    &:has(+ .is-style-section-primary-dark):after {
        background: var(--wp--preset--color--primary-dark);
    }
    & > .wp-block-media-text {
        & > .wp-block-media-text__media,
        & > .wp-block-media-text__media img {
            aspect-ratio: 5/6;
            object-fit: cover;
        }
        & > .wp-block-media-text__content {
            padding-top: calc(var(--wp--preset--spacing--80) / 2);
            padding-bottom: calc(var(--wp--preset--spacing--80) * 2);
        }
    }
}

@media (min-width: 1200px) {
    div.wp-block-media-text,
    div.wp-block-media-text[class*="is-style-section-"],
    div.wp-block-media-text.has-background,
    div.wp-block-media-text.has-media-on-the-right {
        /* grid-template-columns: 1fr 1fr; */
    }
}

@media (max-width: 782px) {
    .is-root-container > :first-child.wp-block-group:has(.wp-block-media-text) > .wp-block-media-text,
    .wp-site-blocks > :first-child.wp-block-template-part + .wp-block-group:has(.wp-block-media-text) > .wp-block-media-text,
    .entry-content > :first-child.wp-block-group:has(.wp-block-media-text) > .wp-block-media-text {
        flex-direction: column-reverse;
        display: flex;
        gap: var(--wp--preset--spacing--80);
        &.has-media-on-the-right {
            flex-direction: column;
        }
        & > .wp-block-media-text__media,
        & > .wp-block-media-text__media img {
            aspect-ratio: 1;
            object-fit: cover;
        }
        & > .wp-block-media-text__content {
            padding-bottom: 0;
            width: 100%;
        }
    }
}