body {
    margin: 0px;
    display: grid;
}

a {
    text-decoration: none;
}

.grid {
    display: grid;
    justify-self: center;
    max-width:1440px;
    grid-template-rows: 8vh 9vh 1fr 269px;
}

@media (max-width: 600px) {
    .grid {
        display: grid;
        justify-self: center;
        max-width: 1440px;
        grid-template-rows: 11vh 6vh 1fr auto;
    }

    /*div.breadcrumbformobile a {

        left: calc(50% - 40px);
        width: 100px;
        display: block;
        height: 25px;
        background: transparent;
        text-align: center;
        padding: 0 15px 0 15px;
        position: relative;
        margin: 0 5px 0 0;
        font-size: 20px;
        text-decoration: none;
        color: black;
    }*/
    h1 { /*загаловок*/
        font-size: 2.5em;
        /*line-height: 2.5em;*/
        text-align: center;
        color: #2C3759;
        align-self: center;
        padding-top:3%;

    }

    .ssalc { /*ячейки в табличке*/
        width: 280px;
        margin-bottom: 6vh;
        margin-top: 6vh;
        align-self: center;
        margin-left: auto;
        margin-right: auto;
        /*
        margin-right:auto;*/
        -webkit-box-shadow: 0 1px 20px 2px rgb(255 240 240);
    }

    div.docs-sidebar {
        display: none;
    }

    div.article_container {
        width: 100%;
        display: block;


    }
    div.story_master { /*табличка*/
        display: block;
        width: 100%;

    }
    div.story {
        display: block;
        flex-wrap: nowrap;
    }

    .table {
        display: table;
        border: 1px;
        background-color: white;
        margin-bottom: 15px;
        vertical-align: top;
    }

    .table img {
        width: 280px;
        object-fit: contain;
        height: 208px;
    }

    .table .v-middle {
        vertical-align: top;
        text-align: center;
        height: 25%;
        overflow: hidden;
        max-height: 24vh;
        font-size:1em;
        /*padding: 0 10px;*/

    }

    .table .pad {
        padding: 0 10px;
        height: 25%;
        font-weight:600;
    }

    .table .height {
        height: 1vh;
    }

    .table .cell {
        display: table-cell;
        /*position: relative;*/
    }

    div.cell a {
        color: #444444;
        font-size: 1.12em;
        line-height: 2;
        -webkit-transition: all 0.5s ease;
        transition: all 0.5s ease;
        letter-spacing: normal;

    }

    .cell a:hover {
        color: #6610f2;
    }

    .table .row {
        display: table-row; /*!!!!!!*/
    }
    .cell a:hover {
        color: #6610f2;
    }
    ul.pagination li a {
        background-color: white !important;
        color: black !important;

    }

    div.pagination1 {
        margin-left:auto;
        margin-left:auto;
        text-align-last: center;

    }
    .publish_date{
        background-color: #fff;
        border: 2px solid #FA6900;
        width: fit-content;
        padding: 2px;
        position:absolute;
        font-family: Vollkorn;
        font-feature-settings: 'tnum' on, 'lnum' on;
        line-height:1.3em;
        color:#FA6900;
    }
}
@media (min-width: 1025px) {
    div.breadcrumbformobile {
        display: none;
    }

    .ssalc { /*ячейки в табличке*/
        /*height: 40vh;/*можно отключить*/
        width:260px;
        /*padding-right: 1.7vw;*/
        margin-bottom: 3vh;

        margin-left: 15px;
        margin-right: 15px;
        /*margin-left: auto;
        margin-right:auto;*/
        margin-top: 3vh;
        position:sticky;
    }

    .preview {
        font-family: system-ui;
    }

    h1 { /*загаловок*/
        font-size: 2.5em;
        /*line-height: 2.5em;*/
        text-align: center;
        color: #2C3759;
        align-self:center;


    }

    h4 {
        font-size: 2.1em;
        text-align: center;
    }

    .section {
        border: 3px solid gainsboro;
        owerflow-x: hidden;
        /*height: 500px;*/
        display: grid;
        justify-self: center;
        width: 100%;
        margin: 0px;
    }

    .section h4 {
        justify-self: center;
        left: 12px;;
        font-family: 'Open Sans', sans-serif;
        font-size: 2.1em;
        line-height: 21px;
        font-feature-settings: 'tnum' on, 'lnum' on;
        color: #6E7280;
        margin: 0px;
        height: auto;
        width: 90%;
    }

    .section img {
        margin-top: 1vh;
        justify-self: center;
        align-self: center;
        /*width: 90%;*/
    }

    * {
        font-family: cursive;
    }

    .modal img:first-child {
        width: 100%;
        padding-top: 30px;
    }

    .table {
        width: 90%;
        height: 100%;
        display: table;
        border: 1px;
        background-color: white;
        margin-bottom: 15px;
        vertical-align: top;
        -webkit-box-shadow: 0 1px 20px 2px rgb(255 240 240);
    }

    .table img {
        width: 280px;
        object-fit: contain;
        height: 208px;
    }

    .table .v-middle {
        vertical-align: top;
        text-align: center;
        height: 25%;
        overflow: hidden;
        max-height: 24vh;
        /*padding: 0 10px;*/

    }

    .table .pad {
        padding: 0 10px;
        height: 25%;
    }

    .table .height {
        height: 1vh;
    }

    .table .cell {
        display: table-cell;
        /*position: relative;*/
    }

    div.cell a {
        color: #444444;
        font-size: 16px;
        line-height: 2;
        -webkit-transition: all 0.5s ease;
        transition: all 0.5s ease;
        font-weight: normal;
        letter-spacing: normal;

    }

    .cell a:hover {
        color: #6610f2;
    }

    .table .row {
        display: table-row; /*!!!!!!*/


    }

    div.article_container {
        /*padding-right: 20px;*//*вроде ничего не меняется*/
        /*padding-left: 20px;*/
        /*height:auto;*/
        display: flex;


    }

    div.docs-sidebar {
        /*display:inline-block;*/ /*вроде ничего не меняется*/
        /*width:20%;*/ /*вроде ничего не меняется*/
        margin-top:2%;
        height:94.3%;
        -webkit-box-shadow: 0 1px 20px 2px rgb(255 240 240);
    }

    div.story_master { /*табличка*/
        display: inline-block;
        width: 100%;

    }

    div.story {
        flex-wrap: wrap;
        display: flex;
    }

    /*ul {
        display: block;
        list-style-type: disc;
        margin-block-start: 1em;
        margin-block-end: 1em;
        margin-inline-start: 0px;
        margin-inline-end: 0px;
        padding-inline-start: 40px;
    }
    */
    ul.pagination li a {
        background-color: white !important;
        color: black !important;

    }

    div.pagination1 {
        text-align-last: center;
        padding-right: 40%;
        padding-left: 10%;
    }
    .publish_date{
        background-color: #fff;
        border: 2px solid #FA6900;
        width: fit-content;
        padding: 2px;
        position:absolute;
        font-family: Vollkorn;
        font-feature-settings: 'tnum' on, 'lnum' on;
        line-height:1.3em;
        top:5%;
        left:-2%;
        color:#FA6900;
    }
    .publish_date:hover {
        color: #fff;
        background-color:#FA6900;
    }
}
@media (min-width:601px) and (max-width:1024px) {
    .grid {
        display: grid;
        justify-self: center;
        max-width: 1440px;
        grid-template-rows: 8vh 6vh 1fr 269px;
    }
    .ssalc { /*ячейки в табличке*/
        /*height: 40vh;/*можно отключить*/
        width: 240px;
        /*padding-right: 1.7vw;*/
        margin-bottom: 3vh;
        margin-left: 15px;
        margin-right: 15px;
        /*margin-left: auto;
        margin-right:auto;*/
        margin-top: 3vh;

    }

    .preview {
        font-family: system-ui;
    }

    h1 { /*загаловок*/
        font-size: 2.5em;
        /*line-height: 2.5em;*/
        text-align: center;
        color: #2C3759;
        align-self:center;


    }

    h4 {
        font-size: 2.1em;
        text-align: center;
    }

    .section {
        border: 3px solid gainsboro;
        owerflow-x: hidden;
        /*height: 500px;*/
        display: grid;
        justify-self: center;
        width: 100%;
        margin: 0px;
    }

    .section h4 {
        justify-self: center;
        left: 12px;;
        font-family: 'Open Sans', sans-serif;
        font-size: 2.1em;
        line-height: 21px;
        font-feature-settings: 'tnum' on, 'lnum' on;
        color: #6E7280;
        margin: 0px;
        height: auto;
        width: 90%;
    }

    .section img {
        margin-top: 1vh;
        justify-self: center;
        align-self: center;
        /*width: 90%;*/
    }

    * {
        font-family: cursive;
    }

    .modal img:first-child {
        width: 100%;
        padding-top: 30px;
    }

    .table {
        width: 100%;
        height: 100%;
        display: table;
        border: 1px;
        background-color: white;
        margin-bottom: 15px;
        vertical-align: top;
        -webkit-box-shadow: 0 1px 20px 2px rgb(255 240 240);
    }

    .table img {
        width: 260px;
        object-fit: contain;
        height: 208px;
    }

    .table .v-middle {
        vertical-align: top;
        text-align: center;
        height: 25%;
        overflow: hidden;
        max-height: 24vh;
        /*padding: 0 10px;*/

    }

    .table .pad {
        padding: 0 10px;
        height: 25%;
    }

    .table .height {
        height: 1vh;
    }

    .table .cell {
        display: table-cell;
        /*position: relative;*/
    }

    div.cell a {
        color: #444444;
        font-size: 16px;
        line-height: 2;
        -webkit-transition: all 0.5s ease;
        transition: all 0.5s ease;
        font-weight: normal;
        letter-spacing: normal;

    }

    .cell a:hover {
        color: #6610f2;
    }

    .table .row {
        display: table-row; /*!!!!!!*/


    }

    div.article_container {
    }

    div.docs-sidebar {
       display: none;
    }

    div.story_master { /*табличка*/
        display: block;
        width: 100%;

    }

    div.story {
        flex-wrap: wrap;
        display: flex;
    }

    /*ul {
        display: block;
        list-style-type: disc;
        margin-block-start: 1em;
        margin-block-end: 1em;
        margin-inline-start: 0px;
        margin-inline-end: 0px;
        padding-inline-start: 40px;
    }
    */
    ul.pagination li a {
        background-color: white !important;
        color: black !important;

    }

    div.pagination1 {
        text-align-last: center;
    }
    .publish_date{
        background-color: #fff;
        border: 2px solid #FA6900;
        width: fit-content;
        padding: 2px;
        position:absolute;
        font-family: Vollkorn;
        font-feature-settings: 'tnum' on, 'lnum' on;
        line-height:1.3em;
        color:#FA6900;
    }
}