/* Box sizing rules */
*,
*::before,
*::after {
    box-sizing: border-box;
}


/* Prevent font size inflation */
html {
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
}


/* Remove default margin in favour of better control in authored CSS */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
    margin-block-end: 0;
}


/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
    list-style: none;
}


/* Set core body defaults */
body {
    min-height: 100vh;
    line-height: 1.5;
}


/* Set shorter line heights on headings and interactive elements */
h1,
h2,
h3,
h4,
button,
input,
label {
    line-height: 1.1;
}


/* Balance text wrapping on headings */
h1,
h2,
h3,
h4 {
    text-wrap: balance;
}


/* A elements that don't have a class get default styles */
a:not([class]) {
    text-decoration-skip-ink: auto;
    color: currentColor;
}


/* Make images easier to work with */
img,
picture {
    max-width: 100%;
    display: block;
}


/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
    font-family: inherit;
    font-size: inherit;
}


/* Make sure textareas without a rows attribute are not tiny */
textarea:not([rows]) {
    min-height: 10em;
}


/* Anything that has been anchored to should have extra scroll margin */
:target {
    scroll-margin-block: 5ex;
}


/* =======================================================
            DESKTOP STYLES
  ======================================================= */

body {
    margin: 0;
    font-family: "Poppins";
    background: #fff;
}

.introduction {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 32px;
}

.introduction header {
    grid-column: 4 /span 6;
    gap: 16px;
    text-align: center;
    padding: 16px;
}

header h1 {
    font-family: "Poppins", sans-serif;
    font-weight: 200;
    font-size: 2.25rem;
    line-height: 140%;
    letter-spacing: 0.25px;
    color: #4D4F62;
}

header h2 {
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-size: 2.25rem;
    line-height: 140%;
    letter-spacing: 0.25px;
    color: #4D4F62;
    margin: 0;
}

header p {
    font-family: "Poppins", sans-serif;
    font-weight: 400;
    font-size: 1rem;
    line-height: 140%;
    color: #4D4F62;
}

.grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
    margin: auto;
    gap: 32px;
    max-width: 1200px;
    padding: 32px;
}

article h1 {
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-size: 1.5rem;
    line-height: 135%;
    color: #4D4F62;
}

article p {
    font-family: "Poppins", sans-serif;
    font-weight: 400;
    font-size: 1rem;
    line-height: 160%;
    color: #6A7178;
}

article img {
    justify-self: end;
    align-self: end;
    padding: 16px;
}

.team {
    border-top: 5px solid #ea5454;
    grid-column: 5 /span 4;
    grid-row: 1/3;
}

.karma {
    border-top: 5px solid #fcae4a;
    grid-column: 5 /span 4;
    grid-row: 3/5;
}

.supervisor {
    border-top: 5px solid #549ef2;
    grid-column: 1 / span 4;
    grid-row: 2/4;
}

.calculator {
    border-top: 5px solid #44d3d2;
    border-radius: 8px;
    grid-column: 9 / span 4;
    grid-row: 2/4;
}

.team,
.karma,
.supervisor,
.calculator {
    box-shadow: 10px 10px 5px 0px rgba(117, 105, 105, 0.3);
}

footer {
    text-align: center;
    font-size: 1.5rem;
}


/* =======================================================
            TABLET STYLES
  ======================================================= */
@media only screen and (max-width:960px) {

    .introduction {
        display: grid;
        grid-template-columns: repeat(8, 1fr);
        gap: 32px;
    }

    .introduction header {
        grid-column: 2 / span 6;
        gap: 16px;
        text-align: center;
        padding: 16px;
    }

    .grid {
        display: grid;
        grid-template-columns: repeat(8, 1fr);
        grid-template-rows: 1fr 1fr 1fr 1fr;
        margin: auto;
        gap: 32px;
        max-width: 800px;
        padding: 32px;
    }

    .supervisor {
        grid-column: 3 / span 4;
        grid-row: 1;
    }

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

    .karma {
        grid-column: 5 / span 4;
        grid-row: 2;
    }

    .calculator {
        grid-column: 3 / span 4;
        grid-row: 3;
    }

    article img {
        justify-self: end;
        align-self: end;
        padding: 16px;
    }
}


/* ========================================================
  MOBILE STYLES
  ======================================================== */
@media only screen and (max-width:600px) {

    .introduction {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: 1fr;
        gap: 32px;
    }

    .introduction header {
        grid-column: span 4;
        gap: 16px;
        padding: 16px;
    }

    .grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: 1fr 1fr 1fr 1fr;
        margin: auto;
        gap: 32px;
        max-width: 600px;
        padding: 32px;
    }

    .supervisor {
        grid-column: 1 / span 4;
        grid-row: 1;
    }

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

    .karma {
        grid-column: 1 / span 4;
        grid-row: 3;

    }

    .calculator {
        grid-column: 1 / span 4;
        grid-row: 4;
    }
}