.shopify-section.featured-promotions-section{
    background-color: #00ABC7;
    padding: 90px 0;

    .promotions-grid-standard{
        position: relative;
        &::before{
            content: "";
            display: block;
            background-image: url('/cdn/shop/files/home-story-slide-ribbon.png?v=1756292839');
            background-size: cover;
            width: 286px;
            height: 293px;
            position: absolute;
            right: -100px;
            z-index: 1;
            bottom: -50px;

            @media only screen and (max-width: 500px) {
                display: none;
            }
        }
    }
    .featured-promotions{
        
        @media only screen and (max-width: 796px) {
            padding-bottom: 50px;
        }
    }

    ul.slides li .feature-section{
        background-color: transparent !important;
    }
    ul.slides li .feature-section > div{
        display: flex;
        flex-direction: row;

        @media only screen and (max-width: 796px) {
            flex-direction: column;
        }

        figcaption{
            width: 40%;
            text-align: left;
            color: white;
            .title{
                color: white;
            }
            .feature-details{ 
                padding-bottom: 20px;
                p{
                    text-align: left;
                    color: white;
                }
            }

            a.action_button{
                background-color: white;
                color: #00ABC7;
                border: 1px solid white;
                position: unset;
                transform: unset;

                @media only screen and (max-width: 500px) {
                    width: 100%;
                }
            }

            @media only screen and (max-width: 796px) {
                width: 100%;

                .feature-wrap{
                    padding-left: 0px;
                    padding-right: 0px;
                    padding-bottom: 40px;
                }
            }
        }

        a:not(.action_button){
            width: 60%;
            padding-left: 100px;

            &>div.dark-overlay{
                padding-bottom: 65% !important;
                border: 8px solid white;
                border-radius: 15px;
                box-sizing: border-box;
            }

            @media only screen and (max-width: 796px) {
                width: 100%;
                padding-left: 0px;
            }
        }
        
    }
    .flex-control-nav.flex-control-paging{
        justify-content: center;
        padding-left: 30px;
        padding-right: 30px;
        position: absolute;
        bottom: 0px;
        width: 160px;

        @media only screen and (max-width: 796px) {
            bottom: -7px;
            justify-content: center;
            padding-left: 20px;
        }
    }
    .flex-direction-nav{
        margin-left: 10px;
        position: absolute;
        bottom: 15px;
        width: 200px;

        @media only screen and (max-width: 796px) {
            display: block !important;
            bottom: 10px;
            margin-left: 0px;
        }
    }
    .flex-direction-nav a{
        height: auto !important;
        width: auto !important;

        &.flex-prev{
            opacity: .8;
            left: 15px;
        }

        &.flex-next{
            opacity: .8;
            right: 15px;
        }
    }
    
}