.carousel-window {
    position:relative;
    width:var(--carousel-viewport-width, 100vw);
    height:fit-content;
    margin-left:calc(50% - (var(--carousel-viewport-width, 100vw) / 2));
    margin-right:calc(50% - (var(--carousel-viewport-width, 100vw) / 2));
    overflow:hidden;
    padding:2rem 0
}
.carousel-track img {
    object-fit:cover;
    flex-shrink:0
}
.carousel-track {
    display:flex;
    width:max-content;
    gap:1rem;
    padding:0 2rem;
    img {
        width:15rem;
        height:15rem;
        object-fit:cover;
        border-radius:5px;
        flex-shrink:0;
        &:nth-child(2n) {
            transform:translateY(1rem)
        }
        &:nth-child(odd) {
            transform:translateY(0)
        }
    }
}
.center-txt {
    text-align:center;
    margin:0 auto;
    max-width:80vw
}
.service-container {
    max-width:900px;
    margin:0 auto
}
.service-img {
    width:100%;
    margin:0 auto;
    aspect-ratio:5 / 2;
    object-fit:cover
}
.flex {
    display:flex;
    gap:3rem;
    align-items:center
}
.flex-row-reverse {
    flex-direction:row-reverse
}
.flex>* {
    flex:1;
    min-width:0
}
.service-container2 {
    background-color:var(--gray);
    padding:3rem
}
.service-container2 .flex {
    display:grid;
    grid-template-columns:1fr 1fr;
    grid-template-rows:auto 1fr auto;
    column-gap:3rem;
    row-gap:0;
    align-items:stretch
}
.service-container2 .flex>div {
    display:grid;
    grid-template-rows:subgrid;
    grid-row:span 3
}
.service-sale-img {
    width:100%;
    aspect-ratio:5 / 3;
    object-fit:cover
}
.service-social {
    margin:2rem
}
.service-social-img {
    width:100%;
    aspect-ratio:5 / 3;
    object-fit:cover
}
.service-desc {
    margin-bottom:2rem
}
.section--gray .container .flex {
    margin:3rem 0
}
.section--gray .container .flex:last-child {
    margin-bottom:5rem
}
.section--gray .container .flex>div p {
    padding:0 2rem
}
.section--gray .container .flex h3 {
    margin:2rem auto;
    font-size:1.25rem
}
#slider {
    color:#fff;
    font-size:1.25rem;
    padding:5rem 0 3rem;
    background-color:var(--color-primary)
}
@media(max-width:768px) {
    .flex {
        flex-direction:column;
        gap:2rem
    }
    .service-container2 {
        padding:1.5rem
    }
    .section__margin {
        margin:1rem
    }
    .service-container2 .flex {
        grid-template-columns:1fr;
        grid-template-rows:none
    }
    .service-container2 .flex>div {
        grid-row:auto;
        display:block;
        margin-top:4rem
    }
}