.formation {
    .modules-container {
        display: flex;
        flex-wrap: wrap;
        gap: 16px;

        .module-card {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            background-color: var(--color-white);
            padding: 2rem;
            border-radius: 5rem;
            width: 100%;

            @media (min-width: 768px) {
                width: calc(50% - 12px);
            }

            @media (min-width: 1400px) {
                width: calc(25% - 12px);
            }

            .icon-container {
                width: 10rem;
                height: 10rem;
                background: var(--color-bg-page);
                border-radius: 2rem;
                display: flex;
                align-items: center;
                justify-content: center;
                margin-bottom: 2rem;

                svg {
                    width: 5rem;
                    height: 5rem;
                }
            }

            h2 {
                font-size: 3rem;
            }

            ul {
                list-style-type: none;
                padding: 0;
                font-size: 2rem;

                li {
                    display: flex;
                    gap: 0.6rem;

                    .chapterNumber {
                        flex-shrink: 0;
                    }
                }
            }

            &.status {
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                background-color: var(--color-blue-light);
                font-weight: 700;
                line-height: 1;

                svg {
                    width: 7rem;
                    height: 7rem;
                }

                p {
                    font-size: 4rem;
                    text-align: center;
                    line-height: 110%;

                    small {
                        display: inline-block;
                        padding: 1.5rem;
                        font-size: 1.6rem;
                        font-weight: 400;
                        line-height: 120%;
                    }
                }
            }
        }
    }
}

.lesson {
    font-size: 14px;

    h1 {
        font-size: 35px;
        color: var(--color-teal);
        line-height: 50px;
        text-align: left;
        padding: 10px 0 0;
        margin: 0;
    }

    h2, h3, h4 {
        color: var(--color-indigo);
    }

    h2 {
        font-size: 28px;
        text-align: left;
        line-height: normal;
        margin: 25px 0 15px;
        border-bottom: 1px dotted var(--color-indigo);
    }

    h3 {
        font-size: 22px;
        line-height: normal;
        margin: 20px 0 10px 10px;
    }

    h4 {
        font-size: 18px;
        line-height: normal;
        margin: 20px 0 10px 20px;
    }

    p, ul, table {
        margin: 14px 0;
        line-height: normal;
    }

    p {
        text-align: justify;
    }

    ul {
        list-style: circle inside;
        padding-left: 10px;
    }

    ul ul {
        list-style: square inside;
    }

    li {
        line-height: 150%;
    }

    table {
        font-family: Helvetica, Arial, sans-serif;
        font-size: 110px;
    }

    th, td {
        padding: 5px;
        border: 1px solid var(--color-white);
    }

    thead tr {
        background: var(--color-blue-medium);
        color: var(--color-white);
        font-weight: 700;
    }

    tbody tr {
        background: var(--color-bg-input);
    }

    tbody tr:nth-child(2n+1) {
        background: var(--color-bg-table-alt);
    }
}