.stack-30 > * + *{
    margin-block-start: var(--space-30);
}

.card-container {
    inline-size: fit-content;
    margin: var(--space-750) auto var(--space-575);
}
.card-container {
    display: grid;
    gap: var(--space-400);
}

.card {
    border-radius: var(--space-100);
    padding: var(--space-400);
    inline-size: fit-content;
    height: 15.625rem; /* 250px */
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25);
}
.card {
    display: flex;
    flex-direction: column;
    gap: var(--space-400);
}

.card-header {
    max-width: 15.625rem; /* 250px */
}
.card-title {
    color: var(--color-grey-500);
}
.card-description {
    color: var(--color-grey-400);
    letter-spacing: 0.006rem; /* ~ 0.09px */
}
.card-icon {
    width: 4rem; /* 64px */
    height: 4rem; /* 64px */
    align-self: flex-end;
}

.supervisor-card {
    border-top: var(--space-50) solid var(--color-cyan);
}
.team-builder-card {
    border-top: var(--space-50) solid var(--color-red);
}
.karma-card {
    border-top: var(--space-50) solid var(--color-orange);
}
.calculator-card {
    border-top: var(--space-50) solid var(--color-blue);
}

/* 768px */
@media (min-width: 48rem) and (max-width: 89.99rem){
    .card-container {
        margin: var(--space-925) auto var(--space-1000);
    }
    
    .card-container {
        grid-template-columns: repeat(2, 1fr);
    }

    .team-builder-card, .calculator-card {
        grid-column: span 2;
        justify-self: center;
    }

    .supervisor-card, .karma-card {
        grid-row-start: 2;
    }
    
}

/* 1440px */
@media (min-width: 90rem) {
    .card-header {
        max-width: 17.875rem; /* 286px */
    }
    .card-container {
        grid-template-columns: repeat(3, 1fr);
    }

    .team-builder-card, .calculator-card {
        grid-column-start: 2;
    }
    .supervisor-card, .karma-card{
        grid-row: span 2;
        align-self: center;
    }
}