src/css/blocks/textContent.css - master - engineunity_sub/doxml_work_site

src/css/blocks/textContent.css
140 строк2 KB
PauloChaser
move content from branch dev to master
12 фев 2025, 18:06
12 фев 2025, 18:06a2e2735

.textContent {
    max-width: 100%;
}

.textContent__title {
    font-size: 28px;
    /*margin-bottom: 24px*/
}


.textContent > *,
.modal__content > * {
    text-align: start
}

.textContent h1,
.modal__content h1 {
    font-size: 32px;
    line-height: 1.2;
    font-weight: 600;
    margin-bottom: 32px
}

.textContent h2,
.modal__content h2 {
    font-size: 28px;
    line-height: 1.2;
    font-weight: 600;
    width: fit-content;
    margin-bottom: 24px
}

.textContent p,
.modal__content p {
    font-size: 20px;
    line-height: 1.4;
    margin-top: 24px;
    margin-bottom: 24px
}

.textContent table,
.modal__content table {
    table-layout: fixed;
    max-width: 100%;
    text-align: left
}

.textContent table tr,
.modal__content table tr {
    border-bottom: 1px solid var(--blue);
    padding: 10px 0;
    text-align: left;
    width: 100%
}

.textContent table td,
.textContent table th,
.modal__content table td, .modal__content table th {
    width: 50%
}

.textContent table ul,
.modal__content table ul {
    padding-left: 0
}


@media screen and (max-width: 1440px) {
    .textContent h1,
    .modal__content h1 {
        font-size: 28px;
    }

    .textContent h2,
    .modal__content h2 {
        font-size: 24px;
        margin: 24px auto;
    }

    .textContent p,
    .modal__content p {
        font-size: 18px;
        margin-bottom: 24px;
    }

    .textContent ol,
    .modal__content ol {
        font-size: 18px
    }
}

@media screen and (max-width: 991px) {

    .textContent h1,
    .modal__content h1 {
        font-size: 22px;
        margin-bottom: 16px
    }

    .textContent h2,
    .modal__content h2 {
        font-size: 18px;
        margin: 16px 0
    }

    .textContent p,
    .modal__content p {
        font-size: 14px;
        margin-bottom: 12px
    }

    .textContent ol,
    .modal__content ol {
        font-size: 14px;
        padding-left: 20px
    }
}

@media screen and (max-width: 550px) {
    .textContent table,
    .modal__content table {
        font-size: 14px
    }

    .textContent table tr,
    .modal__content table tr {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column
    }

    .textContent table td, .textContent table th,
    .modal__content table td, .modal__content table th {
        width: 100%
    }
}