.at-membershipMatrix .g-container__inner {
    position: relative;
    overflow-x: scroll;
}

.at-membershipMatrix__grid {
    display: grid;
    grid-template-columns: 200px 200px 1rem 200px 1rem 200px;
}

@media (min-width: 900px) {
    .at-membershipMatrix .g-container__inner {
        overflow-x: initial;
    }

    .at-membershipMatrix__grid {
        grid-template-columns: 300px 24% 1rem 24% 1rem 24%;
    }
}

.at-membershipMatrix__column {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    padding: var(--marginSmall) var(--marginMedium);
    background-color: var(--baseLight100);
}

.at-membershipMatrix__column:not(.row-1, .--firstRow, .--lastRow),
.at-membershipMatrix__columnSpacer:not(.row-1, .--firstRow, .--lastRow) {
    border-top: 1px solid var(--baseDark100);
}

.at-membershipMatrix__columnSpacer {
    background-color: var(--baseLight200);
}

.at-membershipMatrix__column.--firstColumn {
    align-items: flex-start;
    background-color: var(--baseLight200);
}

.--firstColumn.--firstRow,
.--firstColumn.--lastRow,
.at-membershipMatrix__columnSpacer.--firstRow,
.at-membershipMatrix__columnSpacer.--lastRow {
    background: transparent;
}

.at-membershipMatrix__columnTitle {
    margin-block-end: var(--marginExtraSmall);
    text-align: center;
    font-size: var(--h4Size);
    color: var(--primaryColor500);
}

.at-membershipMatrix__columnDescription {
    font-size: var(--12Size);
    color: var(--primaryColor500);
}

.at-membershipMatrix__rowTitle {
    margin-block-end: var(--marginExtraSmall);
    font-size: var(--bodySize);
    font-family: var(--siteFont);
    font-weight: 600;
}

.at-membershipMatrix__rowDescription {
    font-size: var(--14Size);
    line-height: 1.4rem;
}

.at-membershipMatrix__columnTitle,
.at-membershipMatrix__rowTitle,
.at-membershipMatrix__rowDescription {
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
}

.at-membershipMatrix__columnValue {
    padding: 6px 12px;
    font-size: var(--12Size);
    font-weight: 600;
    line-height: 1.1;
    text-transform: uppercase;
    border-radius: var(--borderRadiusLarge);
    background-color: var(--baseDark100);
}

.--green .at-membershipMatrix__columnValue {
    color: var(--baseLight100);
    background-color: #68a800;
}

.--yellow .at-membershipMatrix__columnValue {
    color: var(--baseLight100);
    background-color: #e8b324;
}

.at-membershipMatrix__columnValueExplanation {
    position: absolute;
    bottom: 6px;
    font-size: 10px;
    color: var(--baseDark700);
}

.at-membershipMatrix__columnValue,
.at-membershipMatrix__columnValueExplanation {
    text-align: center;
}

/**
 * border-radius column 1
 */

.at-membershipMatrix__column.--firstColumn.row-1 {
    border-top-left-radius: var(--borderRadius);
}

.at-membershipMatrix__column.--firstColumn.row-6 {
    border-bottom-left-radius: var(--borderRadius);
}

/**
 * border-radius columns 2, 3 and 4
 */

.at-membershipMatrix__column:has(.at-membershipMatrix__columnTitle) {
    border-top-left-radius: var(--borderRadius);
    border-top-right-radius: var(--borderRadius);
}

.at-membershipMatrix__column:has(.at-membershipMatrix__link) {
    border-bottom-left-radius: var(--borderRadius);
    border-bottom-right-radius: var(--borderRadius);
}
