.image-text {
    &__inner {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: rem(48);
        align-items: center;
    }

    &__media {
        margin: 0;
        order: 0;
    }

    &__img {
        width: 100%;
        height: auto;
        display: block;
        border-radius: var(--radius-md);
    }

    &__content {
        order: 1;
    }

    &[data-image-position="right"] {
        .image-text__media {
            order: 1;
        }

        .image-text__content {
            order: 0;
        }
    }

    @include md {
        &__inner {
            grid-template-columns: 1fr;
            gap: rem(32);
        }

        &__media,
        &__content,
        &[data-image-position="right"] .image-text__media,
        &[data-image-position="right"] .image-text__content {
            order: unset;
        }
    }
}
