section {
    padding-top: ($spacer * 4);
    padding-bottom: ($spacer * 4);
}

.section {
    &-main {
        padding-top: 6rem;
        
        @media (min-width: $screen-md) {
            padding-top: 8rem;
        }
        @media (min-width: $screen-lg) {
            padding-top: 0;
        }
        &-image {
            display: none;

            @media (min-width: $screen-lg) {
                display: block;
                max-width: 100%;
                height: auto;
                position: relative;
                top: 1.5rem;
            }
        }
    }
    &-intersect {
        & + & {
            margin-top: ($spacer * -5);
            padding-top: ($spacer * 4.5);
        }
    }
    &_bg {
        &-light {
            &,
            &:before {
                background-color: $light;
                background-image: none;
            }
        }
        &-white {
            &,
            &:before {
                background-color: $white;
                background-image: none;
            }
        }
        &-gradient {
            &,
            &:before {
                background-image: $background-image_gradient;
                background-color: transparent;
            }
            
            color: $white;

            h2.headline {
                &:after {
                    border-color: $white;
                }
            }
            .slick-dots li {
                button:before {
                    background-color: $white;
                    opacity: 1;
                }
                .slick-active button:before {
                    background-color: $slick-dot-color-active;
                }
            }
            .slick-arrow {
                &,
                &:hover,
                &:focus {
                    background-color: $body-bg;
                    box-shadow: $box-shadow;
                }
            }
        }
        &-skew {
            position: relative;
            background: transparent;
            padding-top: ($spacer * 6);
            padding-bottom: ($spacer * 4.5);

            &:before {
                content: '';
                display: block;
                position: absolute;
                top: $spacer;
                left: 0;
                height: 110%;
                width: 100%;
                transform: skewY(2deg);
                z-index: -1;
                margin-top: -2%;
            }
        }
        &-featured {
            z-index: 0;
        }
    }
    &-sticky {
        position: fixed;
        bottom: 0;
        display: block;
        width: 100%;
        box-shadow: $box-shadow;
        z-index: 1;
        padding-top: $spacer * 1.25;
        padding-bottom: $spacer * 1.25;
        opacity: 1;
        transition: opacity 0.3s 0.05s ease-in-out, visibility 0s 0s ease-in;
        visibility: visible;

        &.invisible,
        &.hidden {
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.3s 0s ease-in-out, visibility 0s 0.3s ease-in;
        }
    }
    &-container-close {
        position: absolute;
        text-align: right;
        max-width: inherit;
        width: inherit;
        padding: inherit;
        height: 0;
        overflow: visible;
        
        .btn_close {
            position: relative;
            margin: ($spacer * -1.5) 0 0;
            padding: $spacer;

            &:before {
                content: "";
                width: 16px;
                height: 16px;
                background: transparent url("../img/icons/cross_close.svg") center no-repeat;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate3d(-50%,-50%,0);
            }
            @media (min-width: 360px){
                 margin: 0 $spacer;
            }
            &,
            &:hover,
            &:active,
            &:focus {
                outline: none;
                box-shadow: none;
            }
        }
    }
}