/* Block: Data Grid */

.block-data-grid .text-content:not(:last-child) {
    margin-bottom: 5rem;
}

.block-data-grid .text-content > * {
    margin-block: 0 2.5rem;
}

.block-data-grid .text-content > :where(h1, h2) {
    margin-bottom: 3.125rem;
}

.block-data-grid .text-content > :last-child {
    margin-bottom: 0;
}

.block-data-grid .grid-layout {
    --gap: 1.875rem;
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap);
}

.block-data-grid .data-box {
    --proportion: 2;
    background-color: rgb(from currentColor r g b / .1);
    flex: 1 1 calc(( 100% - ( var(--proportion) - 1 ) * var(--gap) ) / var(--proportion));
    padding: 2.5rem 1.875rem;
}

.block-data-grid .data-box:nth-child(3n+1) {
    color: var(--c-orange);
}

.block-data-grid .data-box:nth-child(3n+2) {
    color: var(--c-green);
}

.block-data-grid .data-box:nth-child(3n+3) {
    color: var(--c-purple);
}

.block-data-grid .data-box :where(.box--title, .box--subtitle) {
    color: currentColor;
}

.block-data-grid .data-box .box--icon {
    max-width: 3.125rem;
    width: auto;
    max-height: 3.125rem;
    height: auto;
}

.block-data-grid .data-box .box--icon path {
    fill: currentColor;
}

.block-data-grid .data-box :is(.box--icon, .box--title):not(:last-child) {
    margin-bottom: 1.875rem;
}

.block-data-grid .data-box .box--subtitle:not(:last-child) {
    margin-bottom: 1.5rem;
}

.block-data-grid .data-box .box--description {
    font-size: var(--font-17-15);
}