steffoweb/components/LinkPanel.module.css

.linkPanel {
    display: grid;
    grid-template-areas:
        "icon text ext1"
        "desc desc ext2"
    ;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto 1fr;

    grid-column-gap: 0;
    grid-row-gap: 0;

    white-space: nowrap;
    text-decoration: none;

    flex-basis: calc(50% - 4px);
    flex-grow: 1;
}

@media (max-width: 492px) {
    .linkPanel {
        width: 100%;
    }
}

.linkPanel[href]:hover, .linkPanel[href]:focus {
    --bhsl-current-lightness: calc(var(--bhsl-link-lightness) + 20%);
}

.linkPanel[href]:active {
    --bhsl-current-lightness: calc(var(--bhsl-link-lightness) + 40%);
}

.linkPanelIcon {
    grid-area: icon;
    justify-self: center;
    align-self: center;
    width: 20px;
    margin-right: 4px;
}

.linkPanelText {
    grid-area: text;
    align-self: center;
    text-decoration: 1px solid underline currentColor;
}

.linkPanelDescription {
    grid-area: desc;
    white-space: normal;
    align-self: start;
}

.linkPanelExtraTop {
    grid-area: ext1;
    align-self: end;
}

.linkPanelExtraBtm {
    grid-area: ext2;
    align-self: end;
}