.type-textmedia {
    container-type: inline-size;
    container-name: textmedia;

    > header {
        @container textmedia (min-width: 48rem) {
            display: none;
        }
    }

    .ce-textpic {
        display: block;

        &.show-flex {
            display: flex !important;
            flex-direction: column;
            gap: 1rem !important;

            @container screen (min-width: 48rem) {
                flex-direction: row;
            }

            .ce-gallery {
                flex: none
            }
        }

        &.ce-intext {
            display: grid;
            grid-template-columns: 1fr;
            gap: 1rem;

            &.ce-nowrap {
                > * {
                    grid-column: span 12;
                }
            }

            &.ce-left .ce-gallery {
                margin-right: 0;
            }

            &.ce-right .ce-gallery {
                margin-left: 0;
            }

            .ce-gallery {
                order: 1;

                img {
                    width: 100%;
                    height: auto;
                    aspect-ratio: 4 / 3;
                    object-fit: cover;
                    object-position: center;
                    border-radius: var(--border-radius-md);
                }
            }

            .ce-bodytext {
                order: 2;

                > header {
                    display: none;
                }

                p {
                    color: var(--body-gray);
                    font-size: 1.25rem;
                    line-height: 32.5px;
                    font-weight: 300;

                    &.text-with-link {
                        font-size: 14px;
                        line-height: 20px;
                        margin-bottom: 1.25rem;

                        a {
                            display: block;
                            margin-bottom: 0.5rem;
                            text-decoration: none;
                        }

                        br {
                            display: none;
                        }
                    }
                }

                @container textmedia (min-width: 48rem) {
                    > header {
                        display: block;
                    }
                }
            }

            @container textmedia (min-width: 48rem) {
                grid-template-columns: repeat(12, 1fr);
                gap: unset;

                &.ce-right {
                    .ce-gallery {
                        order: 2;
                        grid-column: 8 / span 4;
                    }

                    .ce-bodytext {
                        order: 1;
                        grid-column: 2 / span 5;
                    }
                }

                &.ce-left {
                    .ce-gallery {
                        grid-column: 2 / span 4;
                    }

                    .ce-bodytext {
                        grid-column: 7 / span 5;
                    }
                }
            }
        }
    }
}