@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&display=swap');

*,
*::before,
*::after {
    box-sizing: border-box;
}

* {
    margin: 0;
}

body {
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
}

input,
button,
textarea,
select {
    font: inherit;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
    overflow-wrap: break-word;
}

:root {
    --bg-color: hsl(0, 0%, 96%);
    --bg-daniel-color: hsl(263, 55%, 52%);
    --bg-jonathan-color: hsl(219, 19%, 35%);
    --bg-jeanette-color: hsl(0, 0%, 100%);
    --bg-patrick-color: hsl(222, 29%, 14%);
    --bg-kira-color: hsl(0, 0%, 100%);

    --span-hd-daniel-color: hsl(260, 100%, 95%);
    --p-daniel-color: hsl(264, 82%, 80%);
    --bd-daniel-color: hsl(266, 43%, 64%);

    --span-hd-jonathan-patrick-color: hsl(214, 17%, 92%);
    --p-jonathan-patrick-color: hsl(210, 17%, 76%);
    --bd-jonathan-color: hsl(0, 0%, 100%);
    --bd-patrick-color: hsl(272, 41%, 45%);

    --span-hd-jeanette-kira-color: hsl(219, 29%, 14%);
    --p-jeannete-kira-color: hsl(252, 2%, 41%);
    --bd-color-jeanette-kira: hsl(60, 100%, 97%);

    --fm: "Barlow Semi Condensed", sans-serif;
    --fs: 13px;
    --fs-sm: 0.875rem;
    --fs-md: 1rem;
    --fs-lg: 1.25rem;
    --fs-xl: 1.5rem;
    --fs-2xl: 2rem;
    --fs-3xl: 3rem;
}

body {
    font-family: var(--fm);
    font-size: var(--fs);
    background-color: var(--bg-color);
    min-height: 100dvh;

    display: flex;
    flex-direction: column;

    p {
        line-height: 1.5;
    }

    h1,
    h2 {
        line-height: 1.2;
    }
}

.container {
    flex-grow: 1;

    display: flex;
    justify-content: center;
    align-items: center;
}

.cards {
    display: grid;
    grid-template-columns: minmax(300px, 400px);
    gap: 1.5rem;

    margin: 1rem;

    @media (width>=768px) {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "daniel     daniel"
            "jonathan   jeanette"
            "patrick    patrick"
            "kira       kira";


        .daniel {
            grid-area: daniel;
        }

        .jonathan {
            grid-area: jonathan;
        }

        .jeanette {
            grid-area: jeanette;
        }

        .patrick {
            grid-area: patrick;
        }

        .kira {
            grid-area: kira;
        }
    }

    @media (width >=1050px) {
        max-width: 1050px;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        grid-template-areas:
            "daniel     daniel   jonathan   kira"
            "jeanette   patrick  patrick    kira";
    }
}

.card {
    display: flex;
    flex-direction: column;
    gap: 1rem;

    background-color: lightcoral;
    padding: 1.5rem;
    border-radius: 10px;

    h2 {
        font-weight: 600;
    }

    .profile-info {
        display: flex;
        align-items: center;
        gap: 1rem;

        img {
            border-radius: 50%;
            width: 40px;
        }

        p {
            display: flex;
            flex-direction: column;
        }

        span {
            font-weight: 500;
        }
    }
}

.daniel {
    background-color: var(--bg-daniel-color);

    img {
        border: 2px solid var(--bd-daniel-color);
    }

    p {
        color: var(--p-daniel-color);
    }

    h2,
    span {
        color: var(--span-hd-daniel-color);
    }
}

.jonathan {
    background-color: var(--bg-jonathan-color);

    img {
        border: 2px solid var(--bd-jonathan-color);
    }
}

.patrick {
    background-color: var(--bg-patrick-color);

    img {
        border: 2px solid var(--bd-patrick-color);
    }
}

.jonathan,
.patrick {

    p {
        color: var(--p-jonathan-patrick-color);
    }

    h2,
    span {
        color: var(--span-hd-jonathan-patrick-color);
    }

}

.jeanette,
.kira {
    background-color: var(--bg-jeanette-color);

    img {
        border: solid 2px var(--bd-color-jeanette-kira);
    }

    p {
        color: var(--p-jeannete-kira-color);
    }

    h2,
    span {
        color: var(--span-hd-jeanette-kira-color);
    }
}



footer {
    font-size: 0.6875rem;
    text-align: center;
}

footer a {
    color: hsl(228, 45%, 44%);
}