.album-image-background {
        background-color: #0e0e0e;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: 50% 50%;
        color: white;
        font-size: 10pt;
        line-height: unset;
        cursor: pointer;
    }

    .ui-state-default { border:none; background:none; }
    #album-sortable { list-style-type: none; margin: 0; padding: 0; width: 100%; }
    #album-sortable li { padding: 0; float: left; width:100%; }


    .album-image-placeholder {
        background-color: red;
        width: 33.3%;
        height: 200px;
    }

    .album-header-button {
        padding: 0;
        text-align: center;
        font-size: 11pt;
        font-weight: bold;
        cursor: pointer;
        float: left;
        width: 40px;
    }

    .album-image-item {
        padding: 2px;
        float: left;
    }

    .album-image-handle {
        float: left;
        padding: 0;
        text-align: center;
        color: white;
        width: 40px;
        display: flex;
        justify-content: center;
    }

    .album-image-menu {
        float: right;
        text-align: center;
        padding: 0;
        width: 30px;
        justify-content: center;
    }

    /* Default: hide the details */
    .album-sortable .album-image-details {
        display: none;
    }

    /* When the special class is added, show the details */
    .album-sortable.album-sortable-details-show .album-image-details {
        display: block;
    }

    .album-image-container {
        padding: 2px;
        border:1px solid grey;
        width:100%;
        background-color: whitesmoke;
        box-shadow: 5px 5px 9px darkgray;
    }

    @media (max-width: 576px) {
        /* XS */

        #album-route-album-resize {
            display: none;
        }

        .album-content-small > .album-image-item {
            width: 50%;
        }

        .album-content-large > .album-image-item {
            width: 50%;
        }

        #album-image-edit-details-master {
            display: none;
        }
    }

    @media (min-width: 576px) {
        /* SM */

        #album-route-album-resize {
            display: none;
        }

        .album-content-small > .album-image-item {
            width: 100%;
        }

        .album-content-large > .album-image-item {
            width: 100%;
        }
    }

    @media (min-width: 768px) {
        /* MD */

        #album-route-album-resize {
            display: grid;
        }

        .album-content-small > .album-image-item {
            width: 50%;
        }

        .album-content-large > .album-image-item {
            width: 33%;
        }

        #album-image-edit-details-master {
            display: block;
        }
    }

    @media (min-width: 992px) {
        /* LG */

        #album-route-album-resize {
            display: grid;
        }

        .album-content-small > .album-image-item {
            width: 50%;
        }

        .album-content-large > .album-image-item {
            width: 33%;
        }
    }

    @media (min-width: 1200px) {
        /* XL */

        #album-route-album-resize {
            display: grid;
        }

        .album-content-small > .album-image-item {
            width: 33%;
        }

        .album-content-large > .album-image-item {
            width: 25%;
        }
    }

    @media (min-width: 1400px) {
        /* XXL */

        #album-route-album-resize {
            display: grid;
        }

        .album-content-small > .album-image-item {
            width: 33%;
        }

        .album-content-large > .album-image-item {
            width: 16.66%;
        }
    }

    /* Default (mobile first): always full width */
    #aonline-content-block .album-bootstrap-div {
        flex: 0 0 100%;
        max-width: 100%;
        margin-left: 0;
    }

    /* Only when screen ≥ 992px (Bootstrap "lg") */
    @media (min-width: 992px) {
        /* Small parent → full width */
        #aonline-content-block.small .album-bootstrap-div {
            flex: 0 0 100%;
            max-width: 100%;
        }

        /* Large parent → centered (offset-lg-2 col-lg-8) */
        #aonline-content-block.large .album-bootstrap-div {
            flex: 0 0 66.6667%;
            max-width: 66.6667%;
            margin-left: 16.6667%;
        }

        /* Example if you want col-lg-6 centered instead */
        #aonline-content-block.large .album-bootstrap-div.col-6-version {
            flex: 0 0 50%;
            max-width: 50%;
            margin-left: 25%; /* offset-lg-3 */
        }
    }