.op3-element[data-op3-element-type="textwithicon"] {
    [data-op3-children] {
        display: grid;
        grid-template-columns: minmax(auto, max-content);
        grid-template-areas: "media text";
        column-gap: 10px;
        align-items: center;
    }

    .op3-element[data-op3-element-type="icon"] {
        grid-area: media;
    }

    .op3-element[data-op3-element-type="image"] {
        margin: 0;
        grid-area: media;
    }

    .op3-element[data-op3-element-type="text"] {
        margin-bottom: 0;
        width: auto;
        grid-area: text;
    }

    // Show/hide children
    [data-op3-children] {
        .op3-element[data-op3-element-spec="image"],
        .op3-element[data-op3-element-spec="icon"] {
            display: none;
        }

        &[data-op3-block-display-media="image"] .op3-element[data-op3-element-spec="image"],
        &[data-op3-block-display-media="icon"] .op3-element[data-op3-element-spec="icon"] {
            display: block;
        }
    }
}

@mixin textwithiconBlockLayout($device) {
    .op3-element[data-op3-element-type="textwithicon"] {
        [data-op3-children][data-op3-block-layout-#{$device}="0"] {
            grid-template-areas: "media text";
        }

        [data-op3-children][data-op3-block-layout-#{$device}="1"] {
            grid-template-areas: "text media";
        }

        [data-op3-children][data-op3-block-layout-#{$device}="2"] {
            grid-template-areas: "media" "text";
            column-gap: 0 !important;
            row-gap: 10px;
            justify-items: center;
        }

        [data-op3-children][data-op3-block-layout-#{$device}="3"] {
            grid-template-areas: "text" "media";
            column-gap: 0 !important;
            row-gap: 10px;
            justify-items: center;
        }
    }
}

@media (min-width: $breakpoint-tablet) {
    @include textwithiconBlockLayout(desktop);
}

@media (max-width: $breakpoint-tablet) and (min-width: $breakpoint-mobile) {
    @include textwithiconBlockLayout(tablet);
}

@media (max-width: $breakpoint-mobile) {
    @include textwithiconBlockLayout(mobile);
}