/* Block: value-cards */
.value-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: calc(40 * var(--tgc-u));
    max-width: var(--tgc-container);
    margin: calc(38 * var(--tgc-u)) auto 0;
    padding: 0 var(--tgc-gutter);
    list-style: none;
}

/* Figma (node 203:2652): 790 x 300, radius 10, plain white — no rule and no
   shadow around it. */
.value-card {
    display: flex;
    flex-direction: column;
    padding: calc(30 * var(--tgc-u));
    border: none;
    border-radius: calc(10 * var(--tgc-u));
    background-color: var(--tgc-card);
}

/*
 * Each card has its own mark, 40 tall but anywhere from 40 to 101 wide, so the
 * height is what is fixed.
 */
.value-card__icon {
    display: inline-flex;
    align-items: center;
    height: calc(40 * var(--tgc-u));
    margin-bottom: calc(30 * var(--tgc-u));
}

.value-card__icon svg {
    width: auto;
    height: 100%;
}

.value-card__title {
    margin-bottom: 10px;
    font-size: var(--tgc-text-body);
    font-weight: 600;
    line-height: 1.4;
    color: var(--tgc-ink);
}

.value-card__text {
    font-size: var(--tgc-text-ui);
    line-height: calc(26 * var(--tgc-ut));
    color: var(--tgc-ink-muted);
}

@media (max-width: 968px) {
    .value-cards {
        grid-template-columns: 1fr;
        padding: 0 20px;
    }

    .value-card__icon {
        margin-bottom: calc(20 * var(--tgc-u));
    }
}