@use "../common/utils" as *;
@use "../common/mixins" as *;

.product-slider {
    margin-block: calc-rem(60px);
    overflow-x: hidden;

    @include media-breakpoint-up(md) {
        margin-block: calc-rem(80px);
    }

    @include media-breakpoint-up(lg) {
        margin-block: calc-rem(100px);
    }

    &__header {
        display: flex;
        justify-content: space-between;
        margin-bottom: calc-rem(30px);
        gap: calc-rem(10px);
        flex-direction: column;

        @include media-breakpoint-up(lg) {
            margin-bottom: calc-rem(30px);
            gap: calc-rem(30px);
            flex-direction: row;
        }

        .title {
            margin-bottom: 0;
        }
    }
}
