div.inline {
    display: grid;
    align-items: center;
    grid-auto-flow: column;
    justify-content: flex-start;
    grid-column-gap: 15px;

    .lesson-category-head {
        font-size: large;
        margin: 0;
    }
}

.lesson-category {
    h2 {
        margin: 4px;
    }
}

.lesson-category-body {
    margin-bottom: 40px;

    ul {
        list-style: none;
        padding: 0;
        margin: 0;

        display: flex;
        flex-wrap: wrap;

        .lesson-category-number {
            cursor: pointer;
            margin: 4px;
            height: 6rem;
            width: 16rem;
            flex-grow: unset;
            border: 1px solid light-dark(var(--light_border), var(--dark_border));
            padding: 4px 8px;
            background-color: light-dark(#fff, #0d1117);

            a {
                text-decoration: none;
                color: light-dark(var(--light_secondary_text), var(--dark_secondary_text));
                position: relative;

                div {
                    display: grid;
                    height: 100%;
                    width: 100%;
                    grid-template-columns: 4rem auto 1fr;
                    grid-template-rows: 1fr 1fr 1fr;
                    grid-gap: 6px;
                    align-items: center;

                    img {
                        grid-row: 1 / 4;
                        grid-column: 1 / 2;
                        max-width: 100%;
                    }

                    span.number {
                        grid-row: 2 / 3;
                        grid-column: 2 / 3;
                        color: light-dark(var(--light_accent_1), var(--dark_accent_1));
                        font-weight: bold;
                        font-size: xx-large;
                    }

                    span.title {
                        grid-row: 3 / 4;
                        grid-column: 2 / 4;
                        color: light-dark(var(--light_secondary_text), var(--dark_secondary_text));
                    }

                    span.status {
                        grid-row: 1 / 2;
                        grid-column: 2 / 4;
                        text-align: end;
                        text-anchor: start;
                        color: light-dark(var(--light_secondary_text), var(--dark_secondary_text));

                        svg {
                            position: relative;
                            top: 3px;
                        }
                    }

                    span.points {
                        grid-row: 2 / 3;
                        grid-column: 3 / 4;
                        text-align: end;
                        color: light-dark(var(--light_secondary_text), var(--dark_secondary_text));
                    }
                }
            }
        }

        .lesson-category-number:hover {
            a {
                span.number {
                    color: light-dark(var(--light_hover), var(--dark_hover));
                }
            }
        }
    }
}

#single-lesson-container {
    max-width: 80rem;
    margin: 0 auto;

    .single-lesson-info-container {
        display: flex;
        justify-content: space-evenly;
        column-gap: 1rem;

        .single-lesson-info-item {
            flex-grow: 1;
            flex-basis: 5rem;

            display: flex;
            flex-direction: column;
            align-items: start;
            justify-content: space-between;
            padding: 16px;
            width: 100%;
            max-width: 10rem;
            border: 1px solid light-dark(var(--light_border), var(--dark_border));

            div {
                text-align: center;
                width: 100%;
            }

            text {
                font-size: small;
                font-weight: bold;
                margin-bottom: 4px;
            }

        }
    }
}

#single-lesson-container-image-table {
    margin: 16px 0;
}

#admin-single-lesson-container {
    display: grid;
    grid-column-gap: 1rem;
    grid-row-gap: 1rem;

    grid-template-columns: 50% 50%;

    #admin-single-lesson-description {
        grid-row: 1 / span 1;
        grid-column: 1 / span 1;
    }

    #admin-single-lesson-info {
        grid-row: 1 / span 1;
        grid-column: 2 / span 1;

        ul {
            list-style: none;
            padding: 0;

            li.docker {
                margin-bottom: 12px;

                i {
                    width: 1.2rem;
                }
            }

            li.docker:last-child {
                margin-bottom: 0;
            }
        }
    }
}