@use "../../../../../styles/abstracts/variables";
@use "../../../../../styles/abstracts/mixins";

.savings__plans{
    background: #FFF;
    padding: 2rem;
    border-radius: 10px;
    border: 1px solid #ebebeb;
    margin-top: 2rem;
    @media only screen and (max-width: 1000px) {
        padding: 1.5rem;
    }

    &__grid{
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        width: 100%;
        gap: 20px;
        @media only screen and (max-width: 1000px) {
            gap: 10px;
        }

        &__item{
            display: flex;
            flex-direction: column;
            flex: 0 0 300px;
            padding: 1.5rem 1.5rem;
            border-radius: 6px;
            color: #FFF;
            cursor: pointer;
            @media only screen and (max-width: 1000px) {
                flex: 0 0 235px; 
                padding: 1rem;
            }

            span{
                background: #FFF;
                color: variables.$col-primary-btn;
                font-weight: bold;
                width: 100%;
                font-size: .8rem;
                cursor: pointer;
                text-align: center;
                border-radius: 6px;
                padding: .5rem .7rem;
                margin-top: .7rem;
                @media only screen and (max-width: 1000px) {
                    width: 100%;
                }
            }

            &__top{
                display: flex;
                justify-content: space-between;
                @media only screen and (max-width: 1000px) {
                    border-bottom: 1px solid #dadadad4;
                }

                h3{
                    padding-bottom: .5rem;
                    font-family: variables.$font-bold;
                    font-size: 1rem;
                    @media only screen and (max-width: 1000px) {
                        font-size: .75rem;
                        padding-bottom: .3rem;
                    }
                }
                h5{
                    font-size: .85rem;
                    padding-bottom: .3rem;
                    @media only screen and (max-width: 1000px) {
                        font-size: .7rem;
                    }
                }
            }

            &:nth-child(odd){
                background: linear-gradient(rgba(60, 100, 36, 0.99), rgba(106,153,78, .92)), url("../../../../../public/assets/waves.svg");
                background-repeat: no-repeat;
                background-size: cover;
                background-position: center;
            }

            &:nth-child(even){
                background: linear-gradient(rgba(133, 162, 67, 0.99), rgba(167,201,87, .92)), url("../../../../../public/assets/waves.svg");
                background-repeat: no-repeat;
                background-size: cover;
                background-position: center;
            }

            // &:nth-child(3){
            //     background: yellow;
            // }

        }
    }
}