/* Mobile: 375px - Desktop: 1440px */
/* Family: [Poppins](https://fonts.google.com/specimen/Poppins) - Weights: 200, 400, 600 */
/* Font size: 15px */

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,200;0,400;0,600&display=swap');

:root {
    /* Colors */
    /* Primary Colors */
    --Red: hsl(0, 78%, 62%);
    --Cyan: hsl(180, 62%, 55%);
    --Orange: hsl(34, 97%, 64%);
    --Blue: hsl(212, 86%, 64%);

    /* Neutral Colors */
    --Grey-500: hsl(234, 12%, 34%);
    --Grey-400: hsl(212, 6%, 44%);
    --White: hsl(0, 0%, 100%);
}

body {
    min-height: 100vh;
    margin: 0;
}

.main {
    font-family: 'Poppins', sans-serif;
}

/* Intro adjustments (mobile) */
.intro {
    text-align: center;
    padding: 2.5rem 1rem 1.5rem;
}

.intro { margin: 0 auto; }
.intro h1 { font-size: 1.6rem; font-weight: 200; margin: 0; }
.intro h2 { font-size: 1.6rem; margin: 0; }
.intro p { max-width: 320px; font-weight: 400; font-size: 1rem; margin: 1rem auto 0; }

.cards {
    /* Mobile: 1 column grid (mobile-first) */
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    padding: 1rem;
    max-width: 340px;
    margin: 0 auto 3rem;
    text-align: left;
}

.card {
    position: relative;
    background: var(--White);
    padding: 2.25rem 1.5rem 7rem 1.5rem;
    border-radius: 8px;
    box-shadow: 0 14px 24px rgba(36, 50, 76, 0.08);
    overflow: visible;
}

.card h3 {
    margin: 0 0 0.5rem 0;
    color: var(--Grey-500);
    font-weight: 600;
}

.card p {
    margin: 0;
    color: var(--Grey-400);
    font-size: 15px;
    line-height: 1.6;
}

.card::before {
    content: '';
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0;
    height: 6px;
    border-radius: 8px 8px 0 0;
}

.card-1::before { background: var(--Cyan); }
.card-2::before { background: var(--Red); }
.card-3::before { background: var(--Orange); }
.card-4::before { background: var(--Blue); }

.card img {
    width: 64px;
    position: absolute;
    right: 1.25rem;
    bottom: 1.25rem;
}

@media (min-width: 1024px) {
    body { background: hsl(0, 0%, 98%); }

    .main { align-items: center; }

    .intro {
        max-width: 640px;
        padding-top: 4.5rem;
    }

    .intro h1 { font-size: 2rem; font-weight: 200; }
    .intro h2 { font-size: 2rem; }
    .intro p { text-align: center; max-width: 500px; }

    .cards {
        max-width: 1100px;
        margin: 3rem auto 6rem;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: auto auto;
        gap: 2rem 2rem;
        align-items: start;
        text-align: left;
        padding: 0 2rem;
    }

    /* Side cards span both rows and center vertically so they sit between the top and bottom center cards */
    .card-1 { grid-column: 1 / 2; grid-row: 1 / 3; align-self: center; }
    .card-2 { grid-column: 2 / 3; grid-row: 1 / 2; z-index: 3; }
    .card-4 { grid-column: 3 / 4; grid-row: 1 / 3; align-self: center; }
    .card-3 { grid-column: 2 / 3; grid-row: 2 / 3; }

    .card { padding: 2.5rem 2.25rem 10rem 2.25rem; }

    .card img { width: 72px; right: 2.25rem; bottom: 2.25rem; }
}