@import url('https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed: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&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: 0px;
    padding: 0px;
}
:root{
    /* ### Primary */

    --Purple50: hsl(260, 100%, 95%);
    --Purple300: hsl(264, 82%, 80%);
    --Purple500: hsl(263, 55%, 52%);

    /* ### Neutral */

    --White: hsl(0, 0%, 100%);
    --Grey100: hsl(214, 17%, 92%);
    --Grey200: hsl(0, 0%, 81%);
    --Grey400: hsl(224, 10%, 45%);
    --Grey500: hsl(217, 19%, 35%);
    --Darkblue: hsl(219, 29%, 14%);
    --Black: hsl(0, 0%, 7%);
}
body{
    background-color: var(--Grey200);
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.main-container{
    margin-inline: 2rem;
    margin-block: 3rem;
    display: grid;
    row-gap: 40px;
}
.card{
    min-height: 285px;
    border-radius: 10px;
    display: grid;
    row-gap: 20px;
    box-shadow: 1px 1px 4px;
    padding: 2rem;
}
.card1{
    background-color: var(--Purple500);
    color: var(--White);
}
.card2{
    background-color: var(--Grey400);
}
.card3{
    background-color: var(--White);
    color:var(--Grey400);
}
.card4{
    background-color: var(--Darkblue);
    color: var(--Grey200);
}
.card5{
    background-color: var(--White);
    color:var(--Grey400);
}
.intro{
    display: flex;
    column-gap: 10px;
    align-items: center;
}
.photo{
    width: 40px;
    height: 40px;
    border-radius: 40px;
}

.jonathan-photo{
    border: solid var(--White) 2.5px;
}
.position-jonathan{
    color: var(--Grey200);
}
.card3 h4{
    color: var(--Grey400);
}
.patrick-photo{
    border: solid var(--Purple500) 2.5px;
}
.photo-daniel{
    border: solid var(--Purple300) 2.5px;
}
.daniel{
    color: var(--Grey100);
}

@media (min-width:600px) {
    .main-container{
        grid-template-columns: repeat(2,1fr);
        grid-template-rows: repeat(2,1fr);
        gap: 20px;
    }
    .card1{
        grid-column-start: span 2;
    }
    .card5{
        grid-column: 2/3;
        grid-row: 2/4;
    }
}
@media (min-width:1440px){

    .main-container{
        grid-template-columns: repeat(4,1fr);
        grid-template-rows: repeat(2,1fr);
    }
    .card4{
        grid-column: 2/4;
        grid-row: 2/3;
    }
    .card5{
        grid-column: 4/5;
        grid-row: 1/3;
    }

}