.info-dictionary-card {
    width: 100%;
    max-width: calc(var(--page-max-width) * 0.7);
    margin-inline: auto;
    padding: var(--font-md) var(--font-lg);
    border-radius: var(--border-radius);
    background: var(--ncs-container-weak);

    :where(.bg-ncs-weak, .bg-ncs-strong, .bg-narwhal) & {
        background: var(--background);
    }
}

.info-dictionary-table {
    width: 100%;
    border-collapse: collapse;

    & tr {
        border-bottom: 1px solid var(--ncs-container-strong);

        &:last-child {
            border-bottom: 0;
        }
    }

    & th,
    & td {
        padding-block: var(--font-md);
        font-size: var(--font-md);
        line-height: 1.55;
        vertical-align: top;
        text-align: start;
        overflow-wrap: anywhere;
    }

    & th {
        width: 30%;
        padding-inline-end: var(--font-lg);
        font-weight: var(--font-weight-bold);
        color: var(--text);
    }

    & td {
        color: var(--text-faded);
        text-wrap: pretty;
    }

    & td a {
        padding-bottom: calc(0.08em + 1px);
        color: var(--ncs-primary-contrast);
        background: linear-gradient(currentColor, currentColor) no-repeat right bottom / 0 1px;
        -webkit-box-decoration-break: clone;
        box-decoration-break: clone;
        transition: background-size 0.3s ease;

        &:hover {
            background-position-x: left;
            background-size: 100% 1px;
        }
    }
}

@media (max-width: 767px) {
    .info-dictionary-card {
        max-width: calc(var(--page-max-width) * 0.9);
    }

    .info-dictionary-table th,
    .info-dictionary-table td {
        display: block;
        width: 100%;
        padding-block: 0;
    }

    .info-dictionary-table th {
        padding-top: var(--font-sm);
    }

    .info-dictionary-table td {
        padding-bottom: var(--font-sm);
    }
}