.image-gallery {
    & ::selection {
        background: transparent;
    }

    & .image-container {
        position: relative;
        overflow: hidden;
        aspect-ratio: 2.35;
        aspect-ratio: 1.77;
        cursor: url(/static/images/ArrowCircleRight.svg), default;
    }

    & .image-container.left-hover {
        cursor: url(/static/images/ArrowCircleLeft.svg), default;
    }

    & .previous.slide {
        opacity: 1;
        z-index: 2;
    }

    & .active.slide {
        opacity: 1;
        z-index: 3;
    }

    & .slide {
        position: absolute;
        z-index: 1;
        top: 0;
        left: 0;
        opacity: 0;
        transition: opacity 0.2s;
        cursor: pointer;
        pointer-events: none;
    }

    & .pager {
        z-index: 5;
        background-color: rgba(0, 0, 0, 0.7);
        display: inline-flex;
        flex-direction: row;
        padding: 4px;
        align-items: flex-start;
        gap: 12px;
        /*		position: absolute;*/
        /*		bottom: 0;*/
        /*		left: 0;*/
        border-radius: 8px;
    }

    & .page-button {
        appearance: none;
        width: 0.5rem;
        aspect-ratio: 1;
        border: 1px solid #fff;
        background: transparent;
        border-radius: 0.5rem;
        padding: 0;
        cursor: pointer;
        box-sizing: border-box;
    }

    & .page-button:hover,
    & .page-button:focus {
        background-color: rgba(255, 255, 255, 0.7);
        outline: none;
    }

    & .page-button.active {
        background-color: rgba(255, 255, 255, 1);
    }
}