:root {
    --transition: 0.25s ease-out;
    --white: #ffffff;
    --white-rgb: 255,255,255;
    --black: #0a0a0a;
}

.module-customcta3blocks {

    .custom-cta-3blocks {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-gap: 1rem;
        grid-template-areas:
            'block-cover block-cover block-1'
            'block-cover block-cover block-2';
        height: 25rem;

        margin: 0;
        overflow:hidden;

        @media all and (max-width: 767px) {
            grid-template-columns: repeat(2, 1fr);
            grid-template-areas:
            'block-cover block-cover'
            'block-1 block-2';
            height: auto;
        }
    }

    .item-3block {
        overflow: hidden;
        text-decoration: none;
        position: relative;
        color: var(--black);

        @media all and (max-width: 767px) {
            height: 12.5rem;
        }

        &.item-0 {
            grid-area: block-cover;
            position: relative;

            @media all and (max-width: 767px) {
                height: 25rem;
            }
        }

        &.item-1{
            grid-area: block-1;
        }

        &.item-2{
            grid-area: block-2;
        }

        &.item-3{
            grid-area: block-3;
        }

        &.item-4{
            grid-area: block-4;
        }

        .item-3block_img {
            width: 100%;
            height: 100%;

            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                opacity: 0.95;
                transition: var(--transition);
            }
        }

        .item-3block_content {
            position: absolute;
            bottom: 1.25rem;
            background: rgba(var(--white-rgb), 0.85);
            padding: 1rem 1.5rem;
            width: auto;
            min-width: 12.5rem;
            transition: var(--transition);

            @media all and (max-width: 991px) {
                min-width: unset;
                width: calc(100% - 1.25rem);
                padding-inline: 1rem;
            }

            .item-3block_text {
                font-size: 0.9375rem;
                line-height: 1.25;

                p {
                    margin-bottom: 1rem;

                    &:last-of-type {
                        margin: 0;
                    }
                }
            }
        }

        &.item-0 {
            .item-3block_content {
                width: 32.5rem;
                min-width: unset;
                bottom: auto;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
                text-align: center;
                padding: 2rem 2.5rem;

                h2 {
                    font-size: 3rem;
                }
                .item-3block_text {
                    font-size: 1rem;
                    line-height: 1.5;
                }

                @media all and (max-width: 991px) {
                    width: 85%;
                    padding-inline: 2rem;

                    h2 {
                        font-size: 2.5rem;
                    }
                }
                @media all and (max-width: 767px) {
                    padding-inline: 1.25rem;
                }

            }
        }
        @media all and (min-width: 992px) {
            &:hover {
                .item-3block_img {
                    img {
                        opacity: 1;
                        scale: 1.125;
                    }
                }
                .item-3block_content {
                    background: var(--white);
                }
            }
        }
    }

    .item-3block:focus {
        outline: none;
        text-decoration: none;
    }

}