.introduction-capability{
    padding: 100px 0 40px;
    >.container{
        >h3{
            text-align: center;
            color: var(--color-primary-1);
            margin-bottom: 24px;
        }
        >h2{
            text-align: center;
            margin-bottom: 60px;
        }
        >p{
            margin-bottom: 60px;
            white-space: pre-line;
        }
    }
    >.swiper{
        padding: 0 120px;
    }
}

.introduction-capability-items{
    display: grid;
    grid-template-columns: 1fr 42%;
    gap: 60px;
    >.items{
        display: grid;
        grid-template-columns: auto 1fr auto;
        >button{
            text-align: start;
            grid-column: span 3;
            display: grid;
            grid-template-columns: subgrid;
            grid-auto-flow: column;
            gap: 0 16px;
            align-items: center;
            padding: 16px 0;
            border-bottom: 2px solid var(--color-gray-5);
            transition: border-bottom .3s;
            >.en-h2{
                color: var(--color-primary-1);
            }
            &:hover,
            &.active{
                border-bottom: 2px solid var(--color-primary-1);
            }
        }
    }
    >.imgs{
        position: relative;
        >img{
            position: absolute;
            z-index: -1;
            width: 100%;
            height: 100%;
            object-fit: cover;
            opacity: 0;
            transition: opacity .3s;

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

@media screen and (width < 1024px) {
    .introduction-capability-items{
        grid-template-columns: 1fr 1fr;
        gap: 24px;
    }
}
@media screen and (width < 768px) {
    .introduction-capability-items{
        grid-template-columns: 100%;
        gap: 40px;
        >.items{
            grid-template-columns: repeat(2, auto 1fr auto);
            >button{
                padding: 16px;
            }
        }
        >.imgs{
            aspect-ratio: 3 / 2;
        }
    }
}
@media screen and (width < 576px) {
    .introduction-capability{
        padding: 60px 0 40px;
        >.container{
            >h2{
                margin-bottom: 40px;
            }
            >p{
                margin-bottom: 40px;
            }
        }
    }
    .introduction-capability-items{
        >.items{
            grid-template-columns: auto 1fr auto;
        }
    }
}