/****************************************************************************

    ██████╗ ███████╗ █████╗  ██████╗██╗  ██╗    ██████╗  ██████╗ ██╗  ██╗
    ██╔══██╗██╔════╝██╔══██╗██╔════╝██║  ██║    ██╔══██╗██╔═══██╗╚██╗██╔╝
    ██████╔╝█████╗  ███████║██║     ███████║    ██████╔╝██║   ██║ ╚███╔╝ 
    ██╔══██╗██╔══╝  ██╔══██║██║     ██╔══██║    ██╔══██╗██║   ██║ ██╔██╗ 
    ██████╔╝███████╗██║  ██║╚██████╗██║  ██║    ██████╔╝╚██████╔╝██╔╝ ██╗
    ╚═════╝ ╚══════╝╚═╝  ╚═╝ ╚═════╝╚═╝  ╚═╝    ╚═════╝  ╚═════╝ ╚═╝  ╚═╝

 ***************************************************************************/




/* Main styles. */
.beach-box {
}

    .beach-box .post-content {
        background: var(--brand-color-grey) !important;
    }

    .beach-box:not( .orientation-overlapping ) .post-content {
        padding: 35px !important;
    }

        .beach-box.orientation-overlapping .post-content .post-content__text {
            background: rgba( var(--brand-grey), 0.8 ) !important;
        }

        .beach-box:not( .orientation-overlapping ) .post-content .post-content__intro,
        .beach-box:not( .orientation-overlapping ) .post-content .post-content__media,
        .beach-box:not( .orientation-overlapping ) .post-content .post-content__text,
        .beach-box:not( .orientation-overlapping ) .post-content .post-content__info-box {
            padding-left: 0;
            padding-right: 0;
        }

        .beach-box.orientation-horizontal .post-content .post-content__media {
            padding-right: 35px !important;
        }

        .beach-box:not( .orientation-overlapping ) .post-content .post-content__media, 
        .beach-box:not( .orientation-overlapping ) .post-content .post-content__text {
            margin: 0 0 35px 0 !important;
        }

            .beach-box:not( .orientation-overlapping ) .post-content .post-content__media .image {
                container: image-container / inline-size;
            }

                @container image-container ( min-width: 600px ) {
                    .beach-box:not( .orientation-overlapping ) .post-content .post-content__media .image .image-box,
                    .beach-box:not( .orientation-overlapping ) .post-content .post-content__media .image .video {
                        aspect-ratio: 21/9 !important;
                    }
                }

            .beach-box:not( .orientation-overlapping ) .post-content .post-content__text .excerpt {
                margin: 35px 0 0 0 !important;
            }