/* Reset & Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    padding: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    font-family: "Poppins", sans-serif;
    background-color: #fff;
    color: hsl(234, 12%, 34%);
}

/* Header Section */
#heading {
    text-align: center;
    margin-bottom: 4rem;
}

#heading h5 {
    font-weight: 200;
    font-size: 2rem;
    color: hsl(212, 6%, 44%);
}

#heading h1 {
    font-weight: 600;
}

#heading p {
    font-weight: 400;
    font-size: 0.84rem;
    padding: 0.5rem 0;
}

/* Card Grid: Mobile-first (1 column) */
.container {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    padding: 0 1rem;
}

/* Card Styles */
.card {
    padding: 1.7rem;
    border-radius: 8px;
    box-shadow: 1px 20px 20px hsla(180, 9%, 27%, 0.208);
}

.card h3 {
    font-weight: 600;
}

.card p {
    font-weight: 400;
    font-size: 13px;
    color: hsl(212, 6%, 44%);
}

.card img {
    float: right;
    padding: 1.7rem 0 0.75rem;
}

/* Card Colors */
#super {
    border-top: 5px solid hsl(180, 62%, 55%);
}

#team {
    border-top: 5px solid hsl(0, 78%, 62%);
}

#cal {
    border-top: 5px solid hsl(212, 86%, 64%);
}

#karma {
    border-top: 5px solid hsl(34, 97%, 64%);
}

/* Tablet Layout: 2 columns */
@media (min-width: 600px) {
    .container {
        grid-template-columns: repeat(2, 1fr);
    }

    #super {
        grid-column: 1;
    }

    #team {
        grid-column: 2;
    }

    #karma {
        grid-column: 1;
        grid-row: 2;
    }

    #cal {
        grid-column: 2;
    }
}

/* Desktop Layout: 3 columns with staggered rows */
@media (min-width: 1024px) {
    .container {
        width: 70%;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(4, auto);
        gap: 2rem;
    }

    #super {
        grid-column: 1;
        grid-row: 2 / span 2;
    }

    #team {
        grid-column: 2;
        grid-row: 1 / span 2;
    }

    #karma {
        grid-column: 2;
        grid-row: 3 / span 2;
    }

    #cal {
        grid-column: 3;
        grid-row: 2 / span 2;
    }
}

/* Small screens (phones) adjustments */
@media (max-width: 480px) {

    #heading h5,
    #heading h1 {
        font-size: 1.5rem;
    }

    #heading p {
        font-size: 0.75rem;
    }

    .card p {
        font-size: 12px;
    }
}