/* =============== */
/* SHARED CSS      */
/* =============== */

:root {
    /* Fonts Family */
    --ff-poppin: "Poppins", sans-serif;

    /* Fonts Weight */
    --fw-light: 200;
    --fw-regular: 400;
    --fw-bold: 600;

    /* Fonts Size */
    --fs-xs: 13px;
    --fs-s: clamp(13px, 5vw, 15px);
    --fs-m: 20px;
    --fs-l: clamp(24px, 5vw, 36px);

    /* Colors */
    --dark-grey: #4D4F62;
    --light-grey-400: #6A7178;
    --white: #FFFFFF;
    --red: #EA5454;
    --cyan: #44D3D2;
    --blue: #549EF2;
    --orange: #FCAE4A;

    /* Spacing */
    --spacing-xs: 8px;
    --spacing-s: 16px;
    --spacing-m: 24px;
    --spacing-l: 32px;
    --spacing-xl: 40px;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-size: 15px;
    font-family: var(--ff-poppin);
}

body {
    padding: var(--spacing-l);
}

h1 {
    font-size: var(--fs-l);
}

h2 {
    font-size: var(--fs-m);
}

p {
    font-size: var(--fs-s);
}

/* =============== */
/* HEADER STYLE    */
/* =============== */

header {
    text-align: center;
    margin-bottom: clamp(60px, 10vw, 74px);
}

.main-head-wrapper {
    margin-bottom: var(--spacing-s);
}

.light-header {
    font-weight: var(--fw-light);
}


/* =============== */
/* GRID STYLE      */
/* =============== */

.grid-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* =============== */
/* CARD STYLE      */
/* =============== */

.card {
    display: flex;
    flex-direction: column;
    width: clamp(314px, 25vw, 340px);
    margin-bottom: var(--spacing-l);
    padding: var(--spacing-m);
    border-radius: var(--spacing-xs);
    box-shadow: 1px 7px 15px -9px rgba(0, 0, 0, 0.5);
}

.card p {
    font-size: var(--fs-xs);
}

.card svg {
    align-self: end;
    margin-top: var(--spacing-l);
}

#card-1 {
    border-top: 4px solid var(--cyan);
}

#card-2 {
    border-top: 4px solid var(--red);
}

#card-3 {
    border-top: 4px solid var(--orange);
}

#card-4 {
    border-top: 4px solid var(--blue);
}

/* =============== */
/* BREAKPOINT      */
/* =============== */

@media (min-width: 768px) {
    .grid-container {
        display: grid;
        grid-template-rows: repeat(3, 1fr);
        grid-template-areas:
            "alias-A"
            "alias-B"
            "alias-C"
        ;
        justify-items: center;
    }

    .section {
        width: auto;
    }

    .section__A {
        grid-area: alias-A;
    }

    .section__B {
        grid-area: alias-B;
        display: flex;
        gap: var(--spacing-l);
    }

    .section__C {
        grid-area: alias-C;
    }
}

@media (min-width: 1440px) {
    .grid-container {
        grid-template-rows: 1fr;
        grid-template-columns: 1fr auto 1fr;
        grid-template-areas:
            "alias-A alias-B alias-C"
        ;
        align-items: center;
        gap: var(--spacing-l);
    }

    .section__A {
        justify-self: end;
    }

    .section__B {
        flex-direction: column;
    }

    .section__C {
        justify-self: start;
    }
}