.card {
    position: relative;

    display: flex;
    flex-direction: column;
    gap: 0.5rem;

    padding: 1rem;
    border: var(--bdr-card);
    border-radius: var(--bdr-rounded);

    box-shadow: var(--shadow-low);
}

.card-padded {
    padding: 3rem;
}

.card-half-desktop {
    width: 90%;

    @media (width >= 80rem), print {
        width: 50%;
    }
}

.card-header {
    width: 100%;

    font-size: x-large;
    font-weight: 700;
    color: var(--clr-blue);
    text-align: left;
}

.card-header-link {
    display: flex;

    width: 100%;

    color: inherit;
    text-decoration: none;
    white-space: pre;

    transition: var(--transition-easeinout-fast);

    &:visited {
        color: var(--clr-blue-visited);
    }

    &:hover {
        transform: translateY(-1px);
        color: var(--clr-blue-hover);
        text-decoration: underline;
    }

    &:active {
        transform: translateY(1px);
        color: var(--clr-blue-active);
    }

    & > svg {
        width: 1.2em;
        height: 1.2em;
    }
}

.card-table {
    overflow: hidden;
    border: var(--bdr-card);
    border-radius: var(--bdr-rounded);
    box-shadow: var(--shadow-low);

    & > table {
        border-collapse: collapse;
        width: 100%;
    }
}

.card-table-info {
    & > tbody {
        & > tr {
            &:nth-child(odd) {
                background-color: var(--clr-card-line-accent);
            }

            @media (width >= 80rem), print {
                & > td:first-child {
                    white-space: pre;
                }
            }
        }
    }
    & > colgroup > col:first-child {
        width: 50%;

        @media (width >= 80rem), print {
            width: revert;
        }
    }
}

.card-line {
    /* For all cells */
    & > th,
    & > td {
        padding: 0.125rem 0.25rem;

        &:first-child {
            padding-left: 1rem;
        }

        &:last-child {
            padding-right: 1rem;
        }
    }
}

.card-table-dimension {
    text-align: right;
    white-space: pre;

    & > thead {
        & > tr {
            font-weight: 700;
            text-decoration: underline;
            background-color: var(--clr-card-line-accent);

            & > th {
                &:nth-child(1) {
                    width: 20%;
                    padding-left: 2rem;
                }

                &:nth-child(2) {
                    width: 40%;
                }

                &:nth-child(3) {
                    width: 40%;
                }
            }
        }
    }

    & > tbody {
        & > tr {
            &:nth-child(even) {
                background-color: var(--clr-card-line-accent);
            }

            & > td:first-child {
                font-weight: 700;
            }
        }
    }
}

.card-table-breakdown {
    text-align: center;

    & > thead {
        & > tr {
            font-weight: 700;
            text-decoration: underline;
            background-color: var(--clr-card-line-accent);

            & > th {
                width: 50%;
            }
        }
    }

    & > tbody {
        & > tr:nth-child(even) {
            background-color: var(--clr-card-line-accent);
        }
    }
}