:root{
    --color-red:hsl(0, 78%, 62%);
    --color-cyan:hsl(180, 62%, 55%);
    --color-orange:hsl(34, 97%, 64%);
    --color-blue:hsl(212, 86%, 64%);
    --color-gray-500:hsl(234, 10%, 39%);
    --color-white: hsl(0, 0%, 100%);
    --color-background: hsl(0, 0%, 98%);
    --color-gray-950:hsl(0, 0%, 42%);

    --font-family-base:"Poppins", sans-serif;
    --font-weight-light:200;
    --font-weight-medium:400;
    --font-weight-bold:600;

    --font-size-xs:0.75rem;
    --font-size-sm:0.875rem;
    --font-size-base:1rem;
    --font-size-xl:1.5rem;
    --font-size-2xl:2rem;

    --space-xs:0.5rem;
    --space-sm:0.75rem;
    --space-md:1rem;
    --space-lg:1.5rem;
    --space-xl:2rem;

    --border-sm:0.25rem;
    --border-md:0.5rem;
    --border-lg:1.25rem;
    --border-xl:1.5rem;
    --shadow-soft: 0 15px 30px -10px rgba(131, 166, 210, 0.5);

}

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

html{
    font-size:15px;
}

img{
    display: block;
    height: auto;
}

body{
    min-height: 100vh;
    font-family: var(--font-family-base);
    color: var(--color-gray-500);
    line-height: 1.6;
    background-color: var(--color-background);
}

.container{
    max-width:72rem;
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    padding-block:4rem;
    padding-inline:1rem;
    margin: 0 auto;
}

.container__title-light{
    font-weight: var(--font-weight-light);
    font-size: var(--font-size-2xl);
    text-align: center;
}

.container__title-dark{
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-2xl);
    text-align: center;
}

.container__subtext{
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    text-align: center;
    width: 100%;
    margin: 0 auto;
    max-width: 80%;
}

.container__card-section{
    display: grid;
    grid-template-columns: repeat(3,1fr);
    grid-template-areas:
    ". team ."
    "supervisor team calculator"
    "supervisor karma calculator"
    ". karma .";
    gap: 2rem;
    align-items: center;
    margin-top: var(--space-xl);
}

.container__card{
    box-shadow: var(--shadow-soft);
    border-radius: var(--border-md);
    padding: var(--space-xl);
    background-color: var(--color-white);
    display: flex;
    flex-direction: column;
}

.container__card-supervisor{
    border-top: 4px solid var(--color-cyan);
    grid-area: supervisor;
}

.container__card-team{
    border-top: 4px solid var(--color-red);
    grid-area: team;
}

.container__card-karma{
    border-top: 4px solid var(--color-orange);
    grid-area: karma;
}

.container__card-calculator{
    border-top: 4px solid var(--color-blue);
    grid-area: calculator;
}

.img-container{
    width: 100%;
    display: flex;
    justify-content: end;
}

.img-container img{
    width:3rem;
    margin-top: var(--space-md);
}

@media (max-width:480px){
    .container__card-section{
        grid-template-columns: 1fr;
        grid-template-areas:
        "supervisor"
        "team"
        "karma"
        "calculator";
        max-width: 80%;
        margin: var(--space-lg) auto;
    }
}