:root {
    --photoswipe--size--placeholder-scale: 1;
    --photoswipe--size--border-width: 15px;
    --photoswipe--size--border-radius: 4px;
    --photoswipe--size--box-shadow-blur: 10px;
    --photoswipe--size--box-shadow-spread: 25px;

    main .page-section--main-content {
        .block-heading {
            margin-bottom: 30px;
        }
    }

    .gallery-list {
        display: grid;
        grid-template-columns: repeat(3, minmax(176px, 1fr));
        padding: 0;
        gap: 25px;

        .thumbnail-container {
            position: relative;
            display: block;
            width: 100%;
            max-width: 176px;
            height: 0;
            padding-top: 63.8%;
            margin: 0 auto;

            overflow: hidden;

            img {
                position: absolute;
                min-width: 100%;
                min-height: 100%;
                object-fit: cover;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
            }

            &.abacus-parking img {
                margin-top: 24px;
            }

            &.abacus-from-above img {
                margin-top: -20px;
            }

            &.abacus-single-bed-room-2 img,
            &.abacus-single-bed-room-3 img {
                margin-top: -24px;
            }
        }

        figcaption {
            display: block;
            display: -webkit-box;
            height: 55px;

            font-size: 0.8rem;
            text-align: center;

            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        a {
            display: block;
            max-width: 176px;
            margin: 0 auto;
        }

        @media screen and (max-width: 1031px) {
            grid-template-columns: repeat(3, 1fr);
        }

        @media screen and (max-width: 549px) {
            grid-template-columns: repeat(2, 1fr);
        }

        @media screen and (max-width: 419px) {
            grid-template-columns: repeat(1, 1fr);

            a {
                max-width: 100%;
            }

            .thumbnail-container {
                max-width: 352px;
            }

            figcaption {
                height: 20px;

                text-overflow: ellipsis;
                -webkit-line-clamp: 1;
            }
        }
    }

    .pswp__img--placeholder:before,
    .pswp__img--border-container:before {
        content: '';
        display: block;
        position: absolute;
        top: 50%;
        left: 50%;
        width: 100%;
        height: 100%;

        background-color: #fff;
        border: 0 solid #fff;

        box-sizing: content-box;

        transform: translate(-50%, -50%);

        z-index: -1;
    }

    .pswp__img--placeholder:before {
        border-radius: calc(var(--photoswipe--size--border-radius) * var(--photoswipe--size--placeholder-scale));
        border-width: calc(var(--photoswipe--size--border-width) * var(--photoswipe--size--placeholder-scale) * 1.5);
    }

    .pswp__img--border-container:before {
        border-radius: var(--photoswipe--size--border-radius);
        border-width: var(--photoswipe--size--border-width);
    }

    .pswp__injected-image,
    .pswp__img--injected-placeholder {
        width: 100%;
        height: 100%;
    }

    .pswp__img--placeholder:empty {
        display: none;
    }

    .pswp__img-caption {
        position: absolute;
        width: auto;
        max-width: 100%;
        bottom: 0;
        left: 50%;
        padding: 5px 20px;

        color: #fff;
        font-size: 0.813rem;
        font-weight: 500;
        text-align: center;
        text-overflow: ellipsis;
        text-shadow: 0 1px 2px #222;
        white-space: nowrap;

        border-radius: 100rem;
        background: rgb(0 0 0 / 0.7);

        transform: translate(-50%, calc(35px + var(--photoswipe--size--border-width)));
        transition: opacity 200ms;

        opacity: 1;
        overflow: hidden;

        @starting-style {
            opacity: 0;
        }
    }

    .pswp__icn {
        position: relative;
        height: 32px;
        width: 32px;
        top: auto;
        left: auto;
        padding: 3px;
        margin: 10px auto;

        border-radius: 50%;
        background-color: #222;
        border: 2px solid #fff;
        box-shadow: 2px 1px 4px 2px rgb(0 0 0 / 0.3);

        use:not(.pswp__icn-shadow),
        #pswp__icn-arrow {
            transform: translateX(7px);
        }
    }
}