commerce/src/components/common/ListProductWithInfo/ListProductWithInfo.module.scss

@import "../../../styles/utilities";

.listProductWithInfo {
    background-color: var(--background);
    border-top: 1rem solid var(--gray);
    padding-top: 6rem;
    padding-bottom: 6rem;
    &.borderBottom {
        border-bottom: 1rem solid var(--gray);
        @screen lg {
            border-bottom: none;
        }
    }
    @screen lg {
        @apply flex spacing-horizontal-left;
        padding-top: 5.6rem;
        padding-bottom: 5.6rem;
        border: none;
        background-color: var(--background-gray);
    }
    .productsWrap {
        @apply spacing-horizontal-left;
        @screen lg {
            max-width: 75%;
            padding: 0 0.8rem;
            > div > div {
                @apply shape-common-lg bg-white;
                padding: 4rem 0;
            }
            :global(.customArrow) {
                @screen lg {
                    &:global(.leftArrow) {
                        left: calc(-6.4rem + 3rem);
                    }
                    &:global(.rightArrow) {
                        right: calc(-6.4rem + 3rem);
                    }
                }
            }
        }
        @screen xl {
            padding: 0 2.4rem;
            max-width: 80%;
        }
    }
}