﻿.index_four_banner .index_four_banner-items {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-radius: var(--border_radius);
    overflow: hidden;
    margin-top: 20px;
}

    .index_four_banner .index_four_banner-items > * {
        min-width: 0
    }

@media (max-width: 991px) {
    .index_four_banner .index_four_banner-items {
        grid-template-columns: repeat(2, 1fr)
    }
}

.index_four_banner .index_four_banner-items .index_four_banner-item {
    position: relative
}

    .index_four_banner .index_four_banner-items .index_four_banner-item:nth-child(1) {
        grid-column: span 2;
        grid-row: span 2
    }

        .index_four_banner .index_four_banner-items .index_four_banner-item:nth-child(1) .index_four_banner-item-content {
            justify-content: flex-end;
            align-items: flex-start;
            align-content: flex-start
        }

            .index_four_banner .index_four_banner-items .index_four_banner-item:nth-child(1) .index_four_banner-item-content a {
                margin-left: inherit !important
            }

    .index_four_banner .index_four_banner-items .index_four_banner-item:nth-child(4) {
        grid-column: span 2
    }

        .index_four_banner .index_four_banner-items .index_four_banner-item:nth-child(4) .index_four_banner-item-image:before {
            transform: translateX(100%);
            left: inherit;
            right: 0;
            clip-path: polygon(40% 0%, 100% 0%, 100% 100%, 0% 100%)
        }

        .index_four_banner .index_four_banner-items .index_four_banner-item:nth-child(4) .index_four_banner-item-content {
            justify-content: flex-end;
            align-items: flex-end;
            align-content: flex-start
        }

            .index_four_banner .index_four_banner-items .index_four_banner-item:nth-child(4) .index_four_banner-item-content a {
                margin-right: inherit !important
            }

    .index_four_banner .index_four_banner-items .index_four_banner-item:hover .index_four_banner-item-image:before {
        opacity: 1;
        visibility: visible;
        transform: none
    }

    .index_four_banner .index_four_banner-items .index_four_banner-item .index_four_banner-item-image {
        position: relative;
        overflow: hidden
    }

        .index_four_banner .index_four_banner-items .index_four_banner-item .index_four_banner-item-image:before {
            content: "";
            clip-path: polygon(0 0, 60% 0, 100% 100%, 0% 100%);
            width: 50%;
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            background: rgba(0,0,0,0.5);
            transform: translateX(-100%);
            opacity: 0;
            visibility: hidden;
            transition: all .5s
        }

        .index_four_banner .index_four_banner-items .index_four_banner-item .index_four_banner-item-image:after {
            content: "";
            position: absolute;
            inset: 0;
            background: rgba(0,0,0,0.25)
        }

        .index_four_banner .index_four_banner-items .index_four_banner-item .index_four_banner-item-image img {
            width: 100%
        }

    .index_four_banner .index_four_banner-items .index_four_banner-item .index_four_banner-item-content {
        position: absolute;
        inset: 0;
        padding: 2rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center
    }

@media (max-width: 1000px) {
    .index_four_banner .index_four_banner-items .index_four_banner-item .index_four_banner-item-content {
        padding: .25rem 1rem .5rem
    }
}

.index_four_banner .index_four_banner-items .index_four_banner-item .index_four_banner-item-content h2 {
    color: #FFF;
    font-size: 3rem
}

@media (max-width: 1000px) {
    .index_four_banner .index_four_banner-items .index_four_banner-item .index_four_banner-item-content h2 {
        font-size: 2rem
    }
}

.index_four_banner .index_four_banner-items .index_four_banner-item .index_four_banner-item-content p {
    color: #FFF;
    font-size: 1.5rem
}

@media (max-width: 1000px) {
    .index_four_banner .index_four_banner-items .index_four_banner-item .index_four_banner-item-content p {
        font-size: 1rem
    }
}

.index_four_banner .index_four_banner-items .index_four_banner-item .index_four_banner-item-content a {
    width: auto !important
}
