:root{
    /* Colors */
    --primary-red: hsl(0, 78%, 62%);
    --primary-blue: hsl(212, 86%, 64%);
    --primary-cyan: hsl(180, 62%, 55%);
    --primary-orange: hsl(34, 97%, 64%);

    --neutral-100: hsl(0, 0%, 100%);
    --neutral-400: hsl(212, 6%, 44%);
    --neutral-500: hsl(234, 12%, 34%);

    --box-shadow: 0 8px 20px hsla(212, 6%, 44%, 0.3);

    /* Font Sisez */
    --font-h1: clamp(1.5rem, 1.2rem + 1.524vw, 2.4rem);
    --font-h2: 1.3rem;
    --font-p: clamp(1.2rem, 0.786rem + 0.571vw, 1.3rem);
    --font-small: 1rem;

    /* Font Weights */
    --fw-200: 200;
    --fw-400: 400;
    --fw-600: 600;

    /* Spacing */
    --margin: 1.5rem;
    --margin-header-cards: 4rem;
    --margin-h1-p: 0.8rem;
    --padding: 1.5rem;
    --padding-cards: 2rem;
    --padding-cards-img: 2rem;
    --gap: 1.5rem;
}

body{
    font-family: "Poppins", sans-serif;
    background-color: var(--neutral-100);
    font-size: 62.5%;
}

/* Header*/

.header{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    font-size: var(--font-h1);
    font-weight: var(--fw-200);
    color: var(--neutral-500);
    margin-block: var(--margin-header-cards);
    padding-inline: var(--padding);
}

.header span{
    font-weight: var(--fw-600);
    color: var(--neutral-500);
}

.header p{
    margin-block-start: var(--margin-h1-p);
    font-size: var(--font-p);
    font-weight: var(--fw-400);
    color: var(--neutral-500);
}

/* Cards */

.cards{
    display: grid;
    max-width: 1300px;
    margin: 0 auto;
    grid-template-areas:
            "card1"
            "card2"
            "card3 "
            "card4";
    gap: var(--padding-cards);
    padding-inline: var(--margin);
}
    

.cards > * {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    padding: var(--padding-cards);
    border-radius: 0.4rem;
    box-shadow: var(--box-shadow);
    max-width: 25rem;
    margin: 0 auto;
}

.card1{
    border-top: 6px solid var(--primary-cyan);
}

.card2{
    border-top: 6px solid var(--primary-red);
}

.card3{
    border-top: 6px solid var(--primary-orange);
}

.card4{
    border-top: 6px solid var(--primary-blue);
}

.cards h2{
    font-size: var(--font-h2);
    font-weight: var(--fw-600);
    color: var(--neutral-500);
}

.cards p{
    font-size: var(--font-p);
    font-weight: var(--fw-400);
    color: var(--neutral-400);
}

.cards img{
    align-self: flex-end;
    padding-block: var(--padding-cards-img);
}

/*Atribution*/

.attribution{
    padding-block: var(--padding);
    text-align: center;
    font-size: var(--font-p);
    color: var(--neutral-400);
}

.attribution a{
    font-weight: var(--fw-600);
    cursor: pointer;
}

.attribution a:hover{
    text-decoration: underline;
    color: black;
    background-color: var(--neutral-400);
    border-radius: 5px;
}

/*Media Querys ----------------------------------*/

@media (min-width: 48rem) {

    .cards {
        grid-template-areas:
        "card1 card3"
        "card2 card4";
    }

    .cards > * {
        height: 19rem;
    }
    
    .cards img{
        padding-block: var(--padding-cards-img) 0;
    }
}

@media (min-width: 64rem) {
    .cards{
        grid-template-areas:
            ". card2 ."
            "card1 card2 card4"
            "card1 card3 card4"
            ". card3 .";
    }
}