@use "../../../../../styles/abstracts/variables" as * ;

.suggestion {
    background: linear-gradient(to right, rgba(48,61,208, 0.95), rgba(34,96,255, 0.94)), url("/assets/images/waves.svg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    display: flex;
    flex: 0 0 330px;
    padding: 1rem 1.5rem;
    border-radius: 6px;
    color: $col-white;
    padding-bottom: 1.2rem;
    justify-content: space-between;
    align-items: center;

    @media only screen and (max-width: 1000px){
        flex: 0 0 270px;
        padding: 1rem 1.2rem;
        h1{
            font-size: .7rem !important;
            font-weight: 500;
        }
    }

    &--left {
        h1{
            padding-bottom: .7rem;
            font-size: .85rem !important;
        }
        &--btn {
            background: #4474FC;
            border-radius: 6px;
            color: $col-white;
            font-size: .73rem;
            font-weight: 500;
            text-align: center;
            display: inline-flex;
            align-items: center;
            gap: 10px;
            padding: .4rem 1rem;
        }
    }
    img {
        max-width: 70px;
        height: auto;
    }
}

.education {
    @extend .suggestion; 
    background: linear-gradient(to right, rgba(231,244,249, 0.95), rgba(231,244,249, 0.94)), url("/assets/images/waves.svg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;

    h1{
        color: $col-secondary !important;
        font-weight: 500;
    }
}

.estate {
    @extend .suggestion; 
    background: linear-gradient(to right, rgba(212,237,218, 0.95), rgba(212,237,218, 0.94)), url("/assets/images/waves.svg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;

    h1{
        color: $col-success-color !important;
        font-weight: 500;
    }
}