* {
    box-sizing: border-box;
}
body {
    background-color: hsl(0, 0%, 98%);
    font-family: Poppins;
    margin: 0;
}
header {
    width: 80%;
    margin: 0 auto;
    text-align: center;
}
.thin {
    font-weight: 200;
}
main {
    display: grid;
    gap: 1.5rem;
    width: 90%;
    margin: 0 auto;
    justify-content: center;
}
section {
    width: 22rem;
    height: 18rem;
    padding: 1em;
    background-color: hsl(0, 0%, 100%);
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 15px 15px hsla(229, 6%, 66%, .5);
}
img {
    align-self: flex-end;
}
.supervisor {
    border-top: 3px solid hsl(180, 62%, 55%);
}
.team-builder {
    border-top: 3px solid hsl(0, 78%, 62%)
}
.karma {
    border-top: 3px solid hsl(34, 97%, 64%)
}
.calculator {
    border-top: 3px solid hsl(212, 86%, 64%);
}
@media screen and (min-device-width: 900px) {
    main {
        grid-template-columns: repeat(3, 22rem);
        grid-template-rows: repeat(4, 9rem);
    }
    .supervisor {
        grid-row: 2;
    }
    .team-builder {
        grid-column: 2;
    }
    .karma {
        grid-row: 3;
        grid-column: 2;
    }
    .calculator {
        grid-row: 2;
        grid-column: 3;
    }
}