#why { background-color: #EEE; }
@media (min-width: 900px)    { #why { padding: 100px 0; } }
@media (max-width: 899.99px) { #why { padding:  50px 0; } }

/*--------------------------------------------------------------------------------*/

#why > .content-wrapper {}
#why > .content-wrapper > .title {
    max-width: 500px;
    margin: 0 auto 30px;
    
    text-align: center;
    font-size: 35px;
    font-weight: 700;
}
#why > .content-wrapper > .title > span { font-weight: 100; }
#why > .content-wrapper > .description {
    max-width: 600px;
    margin: 0 auto 50px;
    
    text-align: center;
    line-height: 150%;
    font-size: 16px;
}
#why > .content-wrapper > .description > strong { font-size: 18px; }
#why > .content-wrapper > .reasons {
    display: flex;
    filter: drop-shadow(0 0 1.5px rgba(0,0,0,.2));
}
@media (min-width: 900px) {
    #why > .content-wrapper > .reasons {
        flex-direction: row;
        justify-content: center;
        column-gap: 30px;
    }
}
@media (max-width: 899.99px) {
    #why > .content-wrapper > .reasons {
        flex-direction: column;
        row-gap: 25px;
    }
}
#why > .content-wrapper > .reasons > .reason {
    padding: 50px 30px;
    
    background-color: #FFF;
    border-radius: 40px;
}
#why > .content-wrapper > .reasons > .reason:nth-child(3n + 1) { background-color: #99FF99; color: #000; }
#why > .content-wrapper > .reasons > .reason:nth-child(3n + 2) { background-color: #FFF; color: #000; }
#why > .content-wrapper > .reasons > .reason:nth-child(3n + 0) { background-color: #000; color: #FFF; }
#why > .content-wrapper > .reasons > .reason > .title {
    margin-bottom: 20px;
    
    font-size: 30px;
    font-weight: 700;
}
#why > .content-wrapper > .reasons > .reason > .description {
    line-height: 150%;
    font-size: 18px;
    font-weight: 300;
}
#why > .content-wrapper > .reasons > .reason > .description > span { font-weight: 700; }