:root {
    --link-hover-text: rgb(7, 7, 151);
}

html[data-theme='dark'] {
    --link-hover-text: rgb(154, 154, 245);
}


.about-panel {
    display: unset;

    /* overide lesson-panel in styles.css */
    & h2 {
        margin-bottom: 1lh;
    }
}

.cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.card {
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel);
    box-shadow: var(--shadow);
    transition: transform 0.2s ease, box-shadow 0.2s ease;

    &:hover {
        border-color: var(--teal);
        box-shadow: var(--shadow);
        transform: translateY(-3px);
    }

    &>.card-header {
        background-color: var(--table-head);
        padding: 1.5rem 1.5rem 1.5rem 2rem;
        border-radius: 8px 8px 0 0;
        color: var(--ink);


        & * {
            line-height: 1;
            padding: 0;
            margin: 0;
        }

        &>h3 {
            font-size: 1.3rem;
            /* font-weight: normal; */
        }
    }

    &>.card-body {
        background-color: transparent;
        padding: 1rem;


        & * {
            /* line-height: 1.5; */
            padding: 0;
            margin: 0 0 .5lh 0;
        }

        & li,
        & p {
            color: var(--soft-text);
        }

        & ul {

            list-style: none;

            &>li {
                position: relative;
                padding-left: 22px;


                &::before {
                    content: '';
                    position: absolute;
                    top: .7em;
                    left: 0;
                    width: 8px;
                    height: 8px;
                    border-radius: 50%;
                    background: var(--yellow);
                }

                & a {
                    color: inherit;
                    text-underline-offset: .2lh;

                    &:hover {
                        color: var(--ink);
                    }
                }
            }

        }


    }
}

/* .card#feature {} */

.card#usage-guide,
.card#installing {
    grid-column: span 2;
}


@media screen and (max-width: 1180px) {
    .cards {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
    }

    .card#usage-guide {
        grid-column: auto;
    }
}

@media screen and (max-width: 720px) {
    .cards {
        grid-template-columns: 1fr;
    }

    .card {
        grid-column: auto !important;
    }
}