/* main content */
.products-section {
    /* background: yellow; */
    max-width: 1440px;
    height: auto;
    margin: auto;
    padding: 0 0 0 50px;
    /* display: flex; */
    display: grid;
    grid-template-columns: 0.9fr 3fr;
    -moz-column-gap: 64px;
         column-gap: 64px;
    row-gap: 16px;
    transition: all 0.4s ease;  

    .slick-carousel-controls {
        grid-column: 2;
    }
}
/* left side */
.products-section-left {
    position: relative;
    color: var(--white1);
    padding: 32px 24px 24px;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    background: var(--blue1);
    text-align: center;
    transition: all 0.4s ease;

    &::after {
        content: "";
        position: absolute;
        background: var(--blue1);
        top: 50%;
        right: -36px;
        transform: translateY(-50%);
        width: 50px;
        height: 150px;
        -webkit-clip-path: polygon(0 0, 100% 50%, 0 100%);
                clip-path: polygon(0 0, 100% 50%, 0 100%);
    }

    .btn-primary-white {
        display: flex;
        justify-content: center;
    }
}
.products-section-left-title {
    .body7 {
        padding-bottom: 8px;
    }
}
.products-section-left-img {
    height: 180px;
    width: 180px;
    transition: all 0.4s ease;
}
.products-section-left-img img,
.products-section-left-img picture {
    height: 100%;
    width: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: center;
       object-position: center;
}
/* right side */
.products-section-right {
    overflow: hidden;

    .slick-track {
        display: flex;
        gap: 24px;
        overflow: hidden;
    }
}
/* slick */

.product-custom-prev,
.product-custom-next {
    width: 100px;
    height: 45px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    color: var(--blue1);
    border: 1px solid var(--blue1);
    transition: all 0.4s ease;
}
.product-custom-prev.slick-disabled,
.product-custom-next.slick-disabled {
    border-color: var(--greyBorder1);
    color: var(--greyBorder1);
}
.product-custom-prev:not(.slick-disabled):hover,
.product-custom-next:not(.slick-disabled):hover {
    background: var(--blue1);
    color: var(--white1);
    cursor: pointer;
}
.slick-carousel-controls {
    display: flex;
    justify-content: space-between;
    padding-right: 50px;

    .product-custom-prev {
        order: 1;
    }
    .slick-dots {
        all: unset;
        order: 2;
        display: flex;
        align-items: center;
        gap: 6px;
        transition: all 0.4s ease;
    }
    .slick-dots li {
        all: unset;
        height: 10px;
        width: 10px;
        background: var(--greyBorder1);
        border-radius: 50px;
        cursor: pointer;
        transition: all 0.4s ease;
    }
    .slick-dots li.slick-active {
        background: var(--blue1);
    }
    .product-custom-next {
        order: 3;
    }
}

/* newest products variant */
.products-section--newest {
    margin-top: 50px;
}

.products-section--newest .products-section-left,
.products-section--newest .products-section-left::after {
    background: var(--green1);
}

.products-section--newest .products-section-left-img--newest {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--yellow1);
}

.products-section--newest .products-section-left-img--newest svg {
    width: 150px;
    height: 150px;
}

.products-section--newest .product-custom-prev:not(.slick-disabled),
.products-section--newest .product-custom-next:not(.slick-disabled) {
    color: var(--green1);
    border-color: var(--green1);
}

.products-section--newest .product-custom-prev:not(.slick-disabled):hover,
.products-section--newest .product-custom-next:not(.slick-disabled):hover {
    background: var(--green1);
    color: var(--white1);
}

.products-section--newest
.slick-carousel-controls
.slick-dots
li.slick-active {
    background: var(--green1);
}



/* responsive */
@media(max-width: 767px) {
    /* main content */
    .products-section {
        display: flex;
        flex-direction: column;
        padding: 0 20px;
        gap: 16px;    
    }
    .products-section-left {
        padding: 16px;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 16px;
        text-align: start;
        justify-content: center;

        &::after {
            display: none;
        }

        .btn-primary-white {
            order: 3;
            flex: 1 0 100%;
            width: 100%;
            .btn-component {
                justify-content: center;
                width: 100%;
            }
        }
    }
	.products-section--newest {
        margin-top: 40px;
    }

    .products-section--newest
    .products-section-left-img--newest
    svg {
        width: 45px;
        height: 45px;
    }
    .products-section-left-title {
        order: 2;
        .body7 {
            padding-bottom: 4px;
        }
    }
    .products-section-left-img {
        order: 1;
        height: 45px;
        width: 45px;
    }
    /* buttons */
    .product-custom-prev,
    .product-custom-next {
        width: 60px;
    }
    .slick-carousel-controls {
        padding-right: 0;

        .slick-dots li {
            height: 8px;
            width: 8px;
        }
        .slick-dots {
            gap: 4px;
        }
    }
}