.content {
    /* grid */

    --reg-base-xl: 360px; /* = $grid_base_xl */
    --reg-base-lg: 300px; /* = $grid_base_lg */
    --reg-base-md: 240px; /* = $grid_base_md */
    --reg-base-sm: 180px; /* = $grid_base_sm */

    /* block */

    --reg-block-margin: var(--gr-block-margin);

    /* color */

    --reg-color-asu-red: #ff1552;
    --reg-color-asu-red-rgb: 255, 21, 82;
    --reg-color-asu-green: #97bd00;
    --reg-color-asu-green-rgb: 151, 189, 0;
    --reg-color-asu-blue: #008ad5;
    --reg-color-asu-blue-rgb: 0, 138, 213;
    --reg-color-asu-orange: #ff8e00;
    --reg-color-asu-orange-rgb: 255, 142, 0;
}

/* {{{ .icons-docs */

.icons-docs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--reg-base-md), 1fr));
    grid-gap: var(--gr-grid-h-gap);
    margin: var(--reg-block-margin) 0;
}

.icons-docs:first-child {
    margin-top: 0;
}

.icons-docs:last-child {
    margin-bottom: 0;
}

.icons-docs > div {
    border-radius: var(--gr-card-border-radius);
    /* aspect-ratio: 4/3; */
}

.icons-docs > div.full-docs-wrapper {
    grid-row: 1 / 2; /* grid cell */
    grid-column: 1 / -1; /* grid cell */
    /* aspect-ratio: auto; */
}

.icons-docs > div > a {
    --item-color: var(--gr-color-gray-base);
    --bg-color--hover: rgba(var(--gr-color-gray-base-rgb), .1);
    --text-color: var(--item-color);
    display: flex; /* flex box */
    flex-flow: column; /* flex box */
    gap: var(--gr-card-h-gap); /* flex box */
    justify-content: center; /* flex box */
    align-items: center; /* flex box */
    border: 1px solid var(--item-color);
    border-radius: var(--gr-card-border-radius);
    padding: calc(2 * var(--gr-card-padding));
    width: 100%;
    height: 100%;
    background: transparent;
    color: var(--text-color);
    text-align: center;
}

.icons-docs > div > a:hover {
    background-color: var(--bg-color--hover);
}

.icons-docs > div > a > img {
    --icon-size: 48px;
    flex: none; /* flex cell */
    border-radius: 0;
    width: var(--icon-size);
    height: var(--icon-size) !important;
}

.icons-docs > div > a.icons-docs-red {
    --item-color: var(--reg-color-asu-red);
    --bg-color--hover: rgba(var(--reg-color-asu-red-rgb), .1);
}

.icons-docs > div > a.icons-docs-green {
    --item-color: var(--reg-color-asu-green);
    --bg-color--hover: rgba(var(--reg-color-asu-green-rgb), .1);
}

.icons-docs > div > a.icons-docs-blue {
    --item-color: var(--reg-color-asu-blue);
    --bg-color--hover: rgba(var(--reg-color-asu-blue-rgb), .1);
}

.icons-docs > div > a.icons-docs-orange {
    --item-color: var(--reg-color-asu-orange);
    --bg-color--hover: rgba(var(--reg-color-asu-orange-rgb), .1);
}

/* }}} */