@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
:root {
    --Red: hsl(0, 78%, 62%);
    --Cyan: hsl(180, 62%, 55%);
    --Orange: hsl(34, 97%, 64%);
    --Blue: hsl(212, 86%, 64%);
    --Grey-500: hsl(234, 12%, 34%);
    --Grey-400: hsl(212, 6%, 44%);
    --White: hsl(0, 0%, 100%);
    /** Weights: 200, 400, 600 */
}
body {
    font-family: Poppins, sans-serif;
    color: var(--Grey-500);
    font-size: 0.9375em;
}
.container {
    margin: 0 auto;
    width: 100vw;
    padding: 0 2em;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 4em;
}
.header {
    padding: clamp(3.5em, 3.5vw + 2vw , 6em) 0 clamp(2.5em,2.5vh + 3vw, 5em);
    text-align: center;
    max-width: 35em/*525px*/;
    
    .title {
        font-size: clamp(1.6em, 1.6vw + 1vw, 2.4em );
        line-height: 140%;
        margin-bottom: 0.7em;
        
        span {
            font-weight: 200;
        }
    }

    p {
        line-height: 1.4em;
    }
}
.cards-container {

    .column {
        
        .card {
            display: grid;
            gap: 0.5em;
            font-size: 0.9em;
            padding: 2em;
            border-radius: 0.3em;
            box-shadow: rgba(70, 70, 117, 0.2) 0px 7px 29px 0px;
            margin: 2em 0;
            max-width: 23.6666em /*355px*/;
            min-width: 15.3333em /*230px*/;

            .card__paragraph {
                color: var(--Grey-400);

            }
            
            .card__icon {
                margin: 0.8em;
                justify-self: flex-end;
            }
            
            &.border-cyan {border-top: 0.3em solid var(--Cyan);}
            &.border-red {border-top: 0.3em solid var(--Red);}
            &.border-orange {border-top: 0.3em solid var(--Orange);}
            &.border-blue {border-top: 0.3em solid var(--Blue);}
            
        }
    }
}

@media screen and (min-width: 90em) {
    .cards-container {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: 2em;

        .column {
            display: grid;
            align-items: center;
            gap: 2em;

            .card {
                margin: 0;
            }
        }
    }
}