.single-service-certification {
    background-color: var(--color-secondary-1);
    >div{
        padding: 80px 24px;
        max-width: 1044px;
        margin: 0 auto;
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-rows: auto auto;
        gap: 60px;
    }
}

.single-service-certification-swiper{
    grid-row: span 2;
    width: 100%;
    max-width: 300px;
    .swiper-slide{
        height: auto;
        img{
            width: 100%;
            height: 100%;
            object-fit: contain;
        }
    }
    >.swiper-pagination{
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: 8px;
        >.bullet{
            display: block;
            width: 8px;
            aspect-ratio: 1;
            border-radius: 50%;
            background-color: var(--color-primary-2);
            opacity: 0.2;
            transition: opacity 1s;
            &.active{
                opacity: 1;
            }
        }
        &.disable{
            display: none;
        }
    }
}

.single-service-certification-title{
    align-self: end;
    white-space: pre-line;
}
.single-service-certification-remark{
    align-self: start;
    padding: 24px;
    background-color: color-mix(in oklab, white 50%, transparent);
    font-weight: 500;
}

@media screen and (width < 1024px) {
    .single-service-certification > div{
        gap: 24px;
    }
    .single-service-certification-remark{
        padding: 16px;
    }
}
@media screen and (width < 768px) {
    .single-service-certification > div{
        grid-template-columns: 100%;
        grid-template-rows: auto;
        gap: 40px;
    }
    .single-service-certification-swiper{
        grid-row: auto;
        margin: 0 auto;
    }
    .single-service-certification-title{
        text-align: center;
    }
}

@media screen and (width < 576px) {
    .single-service-certification > div{
        padding: 60px 24px;
    }
}