:root{
--Red: hsl(0, 78%, 62%);
--Cyan: hsl(180, 62%, 55%);
--Orange: hsl(34, 97%, 64%);
--Blue: hsl(212, 86%, 64%);
--Dark-Blue: hsl(234, 12%, 34%);
--Grayish-Blue: hsl(229, 6%, 66%);
--Light-Gray: hsl(0, 0%, 98%);
--primary-fs : 15px;
}
 
body{
    font-family: "Poppins", sans-serif;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    color: var(--Grayish-Blue);
    padding: 0 8%;
    background-color: var(--Light-Gray);
}
.header{
    text-align: center;
    padding: 5% 0;
}
.header__title{
    font-weight: 200;
    font-size: 1.5rem;
    margin-bottom: 5px;
    color: var(--Dark-Blue);
}
.header__bold{
    color: var(--Dark-Blue);
    font-weight: 600;
    font-size: 1.5rem;
}
.header__desc{
    max-width: 540px;
    margin: auto;
}
.card--red { grid-area: Team-builder; }
.card--green { grid-area: Supervisor; }
.card--yellow { grid-area: Karma; }
.card--blue{ grid-area: Calculator; }

.card__container{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(4, 1fr);
    grid-template-areas: 
    '. Team-builder .'
    'Supervisor Team-builder Calculator'
    ' Supervisor Karma Calculator'
    '. Karma .'
    ;
    gap: 30px;
} 
.card{
    background-color: white;
    border-radius: 10px;
    padding: 1.2rem;
    margin: 25px 0;
    box-shadow: 2px 4px 12px 0 rgba(0, 0, 0, 0.2);
    position: relative;
    overflow: hidden;
    max-width: 350px;
}
.card::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    display: block;
}
.card--green::before{
    background-color: var(--Cyan);
}
.card--red::before{
    background-color: var(--Red);
}
.card--yellow::before{
    background-color: var(--Orange);
}
.card--blue::before{
    background-color: var(--Blue);
}
.card__icon{
    margin-left: 70%;
}
.card__title{
    color: var(--Dark-Blue);
    margin-bottom: 0;
}
.card__desc{
    margin-top: 10px;
    margin-bottom: 40px;
}
@media (max-width:1024px) {
    .card__container{
        display: flex;
        flex-direction: column;
        align-items: center;
    } 
}
@media (max-width: 500px) {
    .header{
        padding: 15% 0;
    }  
    .card__container{
        display: block;
    } 
}