﻿.block__images {
    padding: var(--padding-lg) 0;
}

    .block__images img {
        width: 100%;
        height: auto;
    }

    .block__images .images__gallery {
        padding: 0;
        position: relative;
    }

        .block__images .images__gallery .button {
            position: absolute;
            top: calc(50% - 1rem);
            width: 3.2rem;
            height: 4.8rem;
            padding: 0;
            background-color: transparent;
            z-index: 1;
        }

            .block__images .images__gallery .button:before {
                content: "";
                width: 0;
                height: 0;
                border-style: solid;
                border-width: 2.4rem 3.2rem 2.4rem 0;
                border-color: transparent var(--white) transparent transparent;
                position: absolute;
                top: 0;
                left: 0;
            }

        .block__images .images__gallery .button--prev {
            left: 1rem;
        }

        .block__images .images__gallery .button--next {
            transform: scaleX(-1);
            right: 1rem;
        }

    .block__images .images__caption {
        font-size: 1.4rem;
        opacity: .5;
    }

    .block__images .images__grid {
        display: flex;
        flex-wrap: wrap;
        gap: 2.4rem;
    }

    .block__images .images__grid img {
        height: 100%;
    }

    .block__images .images__single {
        background-color: var(--bordercolor);
        clip-path: polygon(1.5% 0, 99% 1%, 100% 100%, 0 98%);
        padding: 1.5rem 2rem 2rem 2rem;
        box-sizing: border-box;
    }

    .block__images .images__gallery .images__single {
        clip-path: polygon(0% 0, 99% 1%, 100% 100%, 1.5% 98%);
    }

@media(min-width: 992px) {
    .block__images .images__gallery {
        padding: 0 7.5rem;
        position: relative;
    }

    .block__images .images__grid--lgsm .images__single:nth-child(odd),
    .block__images .images__grid--smlg .images__single:nth-child(even) {
        width: calc(60% - 1.2rem);
    }

    .block__images .images__grid--lgsm .images__single:nth-child(even),
    .block__images .images__grid--smlg .images__single:nth-child(odd) {
        width: calc(40% - 1.2rem);
    }

    .block__images .images__grid--squares .images__single {
        width: calc(33.33% - 1.6rem)
    }

    .block__images .images__single {
        padding: 3rem 3.5rem 3.5rem 4rem;
    }

    .block__images .images__grid--portrait {
        justify-content: center;
        gap: 4.8rem;
    }

    .block__images .images__grid--portrait .images__single {
        max-width: calc(50% - 2.4rem);
    }

    .block__images .images__grid--portrait .images__single img {
        max-height: 59rem;
    }

    .block__images .images__grid--portrait + .row .images__caption {
        text-align: center;
    }
}