@keyframes m_load { 0% {transform: scale(1);opacity: 1;} 50% {transform: scale(.6);opacity: .6;} 100% {transform: scale(1);opacity: 1;} } :root{ --post-width: 280px; } #posts{position: relative;background-color: var(--color-0);} #posts .posts-list{position: relative;left: 10px;width: var(--wrap-width);margin: 0 auto;} article.post{float: left;background-color: var(--color-6);width: var(--post-width);margin: 0 20px 20px 0; /*margin-bottom: 20px;*/padding: 0 0 20px 0;} article.post.moderate{/*opacity: .5;*/} article.post.moderate > *{opacity: .5;} article.post.hide{opacity: 0;} article.post .post-category{width: 100%;display: flex;flex-wrap: wrap;justify-content: center;padding: 0;} article.post .post-category li{font-size: 0.8em;font-weight: bold;text-transform: uppercase;margin: 0 0 5px 5px;color: var(--color-3);} article.post .post-category li a{color: var(--color-3);} article.post .post-category li:not(:last-of-type)::after{content: ',';} article.post .post-head{position: relative;display: flex;background-color: var(--color-1);padding: 12px 7px;/*border-bottom: 3px solid var(--color-1);*/} article.post .post-head h2{width: 100%;color: var(--color-3);margin: 0;font-size: 0.8em;word-wrap: break-word;} article.post .post-head h2 a{color: var(--color-3);} article.post .post-head h2 i{color: var(--color-4);opacity: 0.5;font-style: normal;} article.post .post-head h2 a.rev-link{color: var(--color-4);} article.post .post-head h2 a.post-link{text-decoration: underline;} article.post .post-head-icons{display: flex;align-items: center;} article.post .post-head-icons i{display: inline-block;width: 20px;height: 20px;} article.post .post-head-icons i:not(:last-child){margin-right: 3px;} article.post .post-head-icons i svg{width: 100%;height: 100%;} article.post .post-head-icons i svg path{fill: var(--color-2);} article.post .post-head-icons i.post-is-18-icon svg path{fill: #FF5858;} article.post .post-toggle-btn{display: none;position: absolute;left: 7px;top: calc(50% - 15px);width: 30px;height: 30px;padding: 5px;transform: rotate(90deg);} article.post .post-toggle-btn svg{width: 100%;height: 100%;} article.post .post-toggle-btn svg path{fill: #fff;} article.post .post-moderate{padding: 8px 12px 6px 12px;font-size: 1.1em;font-weight: normal;line-height: 1.2em;color: #9e2020;cursor: default;opacity: 1 !important;} article.post .post-moderate a{color: var(--link-color);} article.post .post-delay{padding: 8px 12px 6px 12px;font-size: 1.1em;font-weight: bold;color: #0034b0;cursor: default;} article.post .post-profile{padding: 8px 12px 6px 12px;font-size: 1em;color: #042f05;cursor: default;} article.post .post-user{display: flex;align-items: center;padding: 0 12px;margin: 10px 0;} article.post .post-user .av{width: 36px;height: 36px;margin-right: 10px;} article.post .post-user .pu-name{display: flex;flex-direction: column;justify-content: center;align-items: flex-start;} article.post .post-user .pu-name span{} article.post .post-user .pu-name .username{} article.post .post-user .pu-name .username a{color: #000;} article.post .post-user .pu-name .datetime{color: #9f9f9f;font-size: 0.8em;} article.post .post-image{position: relative;width: 100%;margin-bottom: 10px;} article.post .post-image.horizontal{height: 210px;} article.post .post-image.vertical{height: 320px;} article.post .post-image.mar-t{margin-top: 8px;} article.post .post-image img{width: 100%;height: 100%;background-color: var(--color-6);object-fit: contain;} article.post .post-slider{position: relative;display: block;white-space: nowrap;overflow: hidden;padding: 0 0 40px 0;} article.post .sl-item, article.post .sl-item-img{position: relative;width: 100%;} article.post .sl-item-img .sl-open, article.post .sl-item .sl-open{position: absolute;z-index: 3;right: 4px;top: 4px;width: 24px;height: 24px;background-color: var(--color-2);opacity: 0;transition: opacity .3s;} article.post .sl-item-img:hover .sl-open, article.post .sl-item:hover .sl-open{opacity: .7;} article.post .sl-item-img .sl-open:hover, article.post .sl-item .sl-open:hover{opacity: 1;} article.post .sl-item-img .sl-open svg, article.post .sl-item .sl-open svg{width: 100%;height: 100%;} article.post .sl-item-img .sl-open svg path, article.post .sl-item .sl-open svg path{fill: #fff;} article.post .sl-item{display: grid;grid-template: 1fr auto / 1fr;height: 360px;} article.post .sl-item-img{display: inline-flex;flex-direction: column;height: 300px;} article.post .sl-item img, article.post .sl-item-img img{position: relative;width: 100%;height: 100%;object-fit: contain;background-color: #edece8;} article.post .sl-item span{position: relative;display: block;padding: 7px;white-space: pre-line;word-wrap: break-word;} article.post .sl-item.short{height: 200px;} article.post .sl-item.short-1{height: 90px;} article.post .sl-item blockquote{align-self: center;display: inline-block;width: 100%;padding: 0 5px;white-space: pre-wrap;margin: 0;line-height: 1.4em;text-align: center;} article.post .sl-item blockquote a{color: #000;} article.post .post-gallery{margin-bottom: 10px;} article.post .pig-items{position: relative;width: 100%;height: 360px;} article.post .post-gallery.horizontal .pig-items{height: 200px;} article.post .pig-item{position: absolute;z-index: 1;display: grid;grid-template: 1fr auto / 1fr; left: 0;top: 0;width: 100%;height: 100%; opacity: 0;transition: opacity 0.4s;} article.post .pig-item.active{opacity: 1;z-index: 2;} article.post .pig-item .pig-image{width: 100%;height: auto;} article.post .pig-item .pig-excerpt{display: block;padding: 10px 7px 20px 7px;width: 100%;text-align: left;} article.post .pig-item .pig-excerpt a{color: #000;} article.post .pig-item blockquote{align-self: center;display: inline-block;width: 100%;padding: 0 5px;white-space: pre-wrap;margin: 0;line-height: 1.4em;text-align: center;} article.post .pig-item blockquote a{color: #000;} article.post .pig-ctrls{display: flex;justify-content: center;align-items: center;margin-top: 10px;} article.post .pig-ctrls li{cursor: pointer;} article.post .pig-ctrls .arrow{display: inline-flex;justify-content: center;align-items: center;width: 30px;} article.post .pig-ctrls .arrow svg{height: 20px;} article.post .pig-ctrls .arrow svg path{fill: var(--color-1);} article.post .pig-ctrls .dot{margin: 0 4px;display: inline-flex;justify-content: center;align-items: center;width: 12px;height: 12px;} article.post .pig-ctrls .dot span{width: 6px;height: 6px;border-radius: 50%;background-color: var(--color-7);} article.post .pig-ctrls .dot.active span{background-color: var(--color-1);} article.post .before-text{text-align: center;margin: 10px 0 10px 0;cursor: default;} article.post .post-title{font-size: 1.1em;margin-bottom: 10px;padding: 0 15px;text-align: left;word-wrap: break-word;} /*article.post.poem .post-title{text-align: center;}*/ article.post .post-title a{color: #000;} article.post .post-excerpt{padding: 0 15px;font-size: 0.9em;line-height: 1.4em;margin-bottom: 15px;white-space: pre-line;word-wrap: break-word;} /*article.post.poem .post-excerpt{text-align: center;}*/ article.post .post-excerpt a{color: #000;} article.post .post-counts{position: relative;display: flex;align-items: flex-end;padding: 0 15px;} article.post .post-counts li{display: inline-flex;align-items: center;margin-right: 10px;cursor: pointer;} article.post .post-counts li svg{height: 24px;margin-right: 5px;} article.post .post-counts li span{display: inline-block;font-weight: bold;color: #DFD9C2;} article.post .post-counts li.likes.liked svg path{fill: var(--liked-color);} /*article.post .post-counts li.likes.liked span{color: var(--liked-color);}*/ article.post .post-counts li.likes.liked span{color: var(--liked-color);} article.post .post-counts li.likes.load{opacity: .3;} article.post .post-counts li.comments.commented svg path{fill: var(--commented-color);} article.post .post-counts li.comments.commented span{color: var(--commented-color);} article.post .post-counts li.reviews.reviewed svg path{fill: var(--reviewed-color);} article.post .post-counts li.reviews.reviewed span{color: var(--reviewed-color);} article.post .post-counts li.views{} article.post .post-counts li.views svg{height: 20px;} article.post .post-counts li.views svg path{fill: #d2ccb4;} article.post .post-counts li.views span{color: #d2ccb4;} article.post .post-counts .like-modal{margin: 0;left: -3px;bottom: 38px;} article.post .post-action{display: flex;justify-content: center;align-items: center;border-radius: 7px;margin: 0 auto;width: calc(100% - 40px);height: 34px;background-color: var(--color-2);color: #fff;font-weight: normal;letter-spacing: 0.5px;} article.post .post-more-ctrl{position: absolute;z-index: 5;right: 10px;bottom: 15px;width: 36px;height: 36px;display: flex;justify-content: center;align-items: center;transition: transform .3s;} article.post[data-status="draft"] .post-more-ctrl{right: 5px;bottom: 0;} article.post.more .post-more-ctrl{transform: rotate(90deg);} article.post .post-more-ctrl svg{width: 100%;height: 100%;} article.post .post-more-ctrl svg path{fill: #989898;} article.post .post-more-wrap{display: none;flex-direction: column;justify-content: flex-end;align-items: center;position: absolute;z-index: 4;width: 100%;height: 100%;left: 0;top: 0;padding: 0 0 50px 0;background-image: linear-gradient(0deg, #edece8 210px, #edece8a8);} article.post.more .post-more-wrap{display: flex;} article.post .post-mbtn{display: inline-flex;align-items: center;justify-content: center;width: 100%;height: 30px;color: #000;} article.post .post-mbtn:not(:last-child){border-bottom: 1px solid #dfdfdf;} article.post .post-mbtn.red{color: #cc6868;} article.post .post-pr-pin{} article.post .post-pr-pin::before{content: 'Закрепить ';} article.post .post-pr-pin.adm::after{content: ' (админ)';} article.post .post-pr-pin[data-status="pinned"]::before{content: 'Открепить';} article.post .post-add-fav{} article.post .post-add-fav::before{content: 'Сохранить в избранное';} article.post .post-add-fav.load::before{content: 'Сохранение...';} article.post .post-add-fav.success::before{content: 'Успешно!';} article.post .post-add-fav.remove::before{content: 'Удалить из избранного';} article.post .post-hide{} article.post .post-hide::before{content: 'Скрыть публикацию'} article.post[data-status="hidden"] .post-hide::before{content: 'Показать публикацию';} article.post .post-status{padding: 8px 12px 6px 12px;font-size: .9em;} article.post .post-status::before{} article.post[data-status="published"] .post-status, article.post[data-status="special"] .post-status{display: none} article.post[data-status="moderate"] .post-status{opacity: 1!important;} article.post[data-status="moderate"] .post-status::before{content: 'На модерации';color: #860000;} article.post[data-status="profile"] .post-status::before{content: 'Опубликовано в профиле';color: #1f5928;} article.post[data-status="draft"] .post-status::before{content: 'Черновик';color: #6c6c6c;} article.post[data-status="hidden"] .post-status::before{content: 'Публикация скрыта';color: #6c6c6c;} .post-circ{display: flex;width: 100%;margin: 30px 0 0 0;justify-content: center;} .post-circ svg{width: 70px;height: 70px;} .post-circ svg circle{stroke: #989898;} .posts-saver{position: relative;width: calc(100% - 20px);display: grid;grid-template: repeat(4, auto) / repeat(3, 1fr);grid-gap: 20px;} .posts-saver svg{display: inline-block;width: 100%;height: auto;} #more-posts{} #more-posts.load{animation: m_load 1s ease-in-out infinite;} #more-posts svg path{fill: var(--color-1);} .nmp-wrap{position: relative;display: flex;flex-direction: column;justify-content: center;align-items: center;width: var(--wrap-width);margin: 50px auto 0 auto} .nmp-wrap p{max-width: 500px;padding: 0 10px;text-align: center;margin: 20px 0 0 0;color: #777;} #no-more-posts{width: 100%;} article.post.widget-1{} article.post.widget-1 .post-head{margin-bottom: 10px;} article.post.widget-1 .widget-1-item{display: block;margin: 0 0 10px 0;padding: 0 5px;color: #000;} article.post.widget-1 .w1i-head{display: flex;flex-wrap: wrap;align-items: flex-end;margin-bottom: 3px;} article.post.widget-1 .w1i-head .av{width: 20px;height: 20px;margin-right: 5px;} article.post.widget-1 .w1i-head .name{display: inline-block;margin-right: 5px;font-weight: bold;font-size: .9em;} article.post.widget-1 .w1i-head .dt{display: inline-block;opacity: .6;font-size: .8em;} article.post.widget-1 .widget-1-item h3{font-size: 1em;font-weight: normal;text-align: left;line-height: 1.2em;margin: 0;} article.post.widget-1 .widget-1-link{margin: 0 5px;text-decoration: underline;color: #043306;} article.post.widget-2{padding-bottom: 14px;} article.post.widget-2 .post-head{} article.post.widget-2 .widget-2-list{position: relative;display: grid;grid-template: repeat(3, 120px) / 1fr 1fr;grid-gap: 4px;padding: 4px;} article.post.widget-2 .widget-2-item{} article.post.widget-2 .widget-2-item a{} article.post.widget-2 .widget-2-item img{width: 100%;height: 100%;object-fit: cover;} article.post.widget-2 .widget-2-more{padding: 0 4px;margin: 7px 0 0 0;text-align: center;font-size: .9em;} article.post.widget-2 .widget-2-more a{color: #000;text-decoration: underline;} article.post.ann-widget{} article.post.ann-widget .aw-item{display: block;padding: 7px 14px 7px 14px;color: #000;} article.post.ann-widget .aw-item:not(:first-of-type){border-top: 1px solid #d2d2d2;} article.post.ann-widget .aw-item:first-of-type{margin-top: 7px;} article.post.ann-widget .aw-item > span{display: block;font-size: .9em;opacity: .4;margin: 0 0 4px 0;} article.post.ann-widget .aw-item > h3{font-size: 1em;text-align: left;margin: 0 0 5px 0;line-height: 1.2em;} article.post.ann-widget .aw-item > p{font-size: 1em;margin: 0;line-height: 1.2em;} article.post .post-vote-action{display: block;width: calc(100% - 30px);height: 36px;margin: 0 auto;border-radius: 6px;background-color: var(--color-2);color: #fff;font-weight: bold;} article.post .post-vote-action::before{content: 'Голосовать';} article.post .post-vote-action.voted::before{content: 'Переголосовать';} article.post .vote-stat{position: relative;padding: 0 15px;margin: 0 0 12px 0;} article.post .vs-item:not(.more){display: grid;grid-template: "votes name" auto "votes line" auto / auto 1fr;grid-gap: 2px 5px;margin: 0 0 7px 0;} article.post .vs-item.more{display: block;padding: 0 0 0 12px;} article.post .vsi-votes{grid-area: votes;align-self: center;font-weight: bold;} article.post .vsi-name{grid-area: name;} article.post .vsi-line{grid-area: line;display: block;height: 3px;background-color: var(--color-2);} article.post .vsi-more{grid-area: name;} article.post .vote-count{padding: 0 15px;margin: 0 0 20px 0;opacity: .5;} .vote-modal-wrap{white-space: normal;overflow: auto;} .vote-modal-wrap.load{min-height: 200px;} .vote-modal-wrap .loader{display: none;width: 100%;height: 100px;} .vote-modal-wrap.load .loader{display: block;} .vote-modal-wrap .loader circle{stroke: var(--color-2);} #vote-modal{position: relative;display: block;overflow: auto;max-height: 340px;white-space: normal;} .vote-modal-wrap.load #vote-modal, .vote-modal-wrap.success #vote-modal{display: none;} #vote-modal .vm-descr{margin: 0 0 24px 0;} #vote-modal .vm-title{font-size: 1.2em;text-align: left;margin: 0 0 12px 0;} #vote-modal .vm-choices{} #vote-modal .vmc-item{margin: 0 0 8px 0;} #vote-modal .vmci-text{} .modal-vote-btn{position: relative;padding: 6px 16px;border-radius: 20px;background-color: #e3e3e3;color: #000;transition: background-color .3s;} .modal-vote-btn:hover{background-color: #f7db9a;} #vote-modal-success{display: none;flex-direction: column;} .vote-modal-wrap.success #vote-modal-success{display: flex;} #vote-modal-success svg{width: 100%;height: 100px;} #vote-modal-success svg circle, #vote-modal-success svg path{stroke: var(--color-2);} #vote-modal-success p{text-align: center;margin: 0;} article.post .post-poll{position: relative;width: calc(100% - 14px);margin: 0 auto 10px auto;padding: 10px 0 0 0;font-size: .9em;line-height: 1.2em; background-color: #dddcd9;border-radius: 10px;} article.post .post-poll .pp-title{padding: 0 8px;margin-bottom: 10px;font-weight: bold;} article.post .post-poll .pp-descr{padding: 0 8px;margin-bottom: 10px;} article.post .post-poll .pp-btn-wrap{padding: 0 8px 8px;} article.post .post-poll .pp-btn{width: 100%;height: 36px; background-color: var(--color-2);color: #fff;border-radius: 6px; font-weight: bold;} article.post .post-poll .pp-btn::before{content: 'Голосовать';} @media screen and (max-width: 1300px){ :root{ --post-width: 252px; } #posts .posts-list{left: 7px;} article.post{margin: 0 14px 14px 0;} .posts-saver{width: calc(100% - 14px);grid-gap: 14px;} article.post .post-image.horizontal{height: 170px;} } @media screen and (max-width: 1100px){ :root{ --post-width: 226px; } .lSSlideOuter .lSPager.lSpg > li{padding: 0 5px;} article.post .post-user{padding: 0 8px;} article.post .post-title{font-size: 1em;line-height: 1.2em;padding: 0 8px;} article.post .post-excerpt{line-height: 1.3em;padding: 0 8px;} article.post .post-counts{padding: 0 8px;} article.post .sl-item{height: 280px;} article.post .post-image.horizontal{height: 160px;} article.post .post-image.vertical{height: 264px;} } @media screen and (max-width: 1024px){ article.post .post-gallery.horizontal .pig-items{height: 140px;} article.post .sl-item .sl-open{opacity: .7;} } @media screen and (max-width: 768px){ :root{--post-width: 263px;} .posts-saver{grid-template: repeat(6, auto) / repeat(2, 1fr);} article.post .sl-item{height: 240px;} article.post .post-image.horizontal{height: 200px;} article.post .post-image.vertical{height: 310px;} } @media screen and (max-width: 600px){ :root{--post-width: 222px;} #posts .posts-list{left: 5px;} article.post{margin: 0 10px 10px 0;} .posts-saver{width: calc(100% - 10px);grid-gap: 10px;} article.post .sl-item{height: 190px;} article.post .post-image.horizontal{height: 170px;} article.post .post-image.vertical{height: 250px;} } @media screen and (max-width: 500px){ /*:root{--post-width: 192px;}*/ :root{--post-width: 405px;} #posts .posts-list{left: 0;} .posts-saver{width: 100%; grid-template: repeat(12, auto) / 1fr;grid-gap: 20px;} article.post{margin: 0 0 20px 0;} article.post .sl-item{height: 270px;} article.post .post-image.horizontal{height: 260px;} article.post .post-image.vertical{height: 400px;} article.post .post-counts li svg{height: 34px;} article.post.toggle{padding: 0;} article.post.toggle:not(.toggled){margin-bottom: 20px;} article.post.toggle.toggled{padding: 0 0 20px 0;} article.post.toggle .post-head{padding-left: 40px;} article.post.toggle:not(.toggled) .post-head{background-image: none;background-color: #ccc;} article.post.toggle:not(.toggled) .post-head h2, article.post.toggle:not(.toggled) .post-head a{color: #5b5b5b;} article.post.toggle .post-toggle-btn{display: block;} article.post.toggle.toggled .post-toggle-btn{transform: rotate(-90deg);} article.post.toggle:not(.toggled) .post-toggle-btn svg path{fill: #5b5b5b;} article.post.toggle .toggle-h{height: 0;overflow: hidden;} article.post.toggle.toggled .toggle-h{height: auto;} article.post.toggle .toggle-d, article.post.toggle .toggle-d-f{display: none;} article.post.toggle.toggled .toggle-d{display: block;} article.post.toggle.toggled .toggle-d-f{display: flex;} article.post.toggle .lSSlideOuter{height: 0} article.post.toggle.toggled .lSSlideOuter{height: auto;} } @media screen and (max-width: 430px){ :root{--post-width: 100%;} .posts-saver{padding-left: 14px;padding-right: 14px;} article.post{background-color: transparent;margin: 0 0 40px 0;} article.post .post-user {padding: 0 14px;margin: 15px 0;} article.post .post-title {font-size: 1.2em;line-height: 1.4em;padding: 0 14px;margin-bottom: 15px;} article.post .post-excerpt {line-height: 1.5em;padding: 0px 14px;font-size: 1em;margin-bottom: 20px;} article.post .post-counts {padding: 0 14px;} article.post .sl-item{height: 120vw;} article.post .post-image.horizontal{height: 74vw;} article.post .post-image.vertical{height: 110vw;} article.post .post-more-wrap{background-image: linear-gradient(0deg, #fdf8ef 210px, #fdf8efab);} article.post.widget-1 .post-head{margin-bottom: 14px;} article.post.widget-1 .widget-1-item{padding: 0 12px;margin-bottom: 14px;} article.post.widget-1 .widget-1-link{margin: 0 12px;} } /* NEW CRITICS POSTS LIST */ #posts .posts-list-altcg{position: relative;width: 100%;} #posts .posts-list-altcg .posts-saver{width: var(--wrap-width);margin: 0 auto;} #posts .posts-list-altcg .release{position: relative;width: 100%;padding: 0 0 0 40px;border-bottom: 3px solid var(--color-1);} #posts .posts-list-altcg .release:not(:last-child){margin-bottom: 45px;} #posts .posts-list-altcg .release span{position: relative;display: inline-block;padding: 0 10px;bottom: -8px;background-color: var(--color-0);color: var(--color-1);font-size: 1.4em;font-weight: bold;} #posts .posts-list-altcg .nc-cover{position: relative;width: var(--wrap-width);margin: 0 auto 30px auto;display: grid;grid-template: "img ttl" auto "img descr" 1fr / 330px 1fr;grid-column-gap: 20px;} #posts .posts-list-altcg .nc-cover:not(:first-child){margin-top: 100px;} #posts .posts-list-altcg .nc-cover div{position: relative;} #posts .posts-list-altcg .nc-cover div:nth-of-type(1){grid-area: img;position: relative;} #posts .posts-list-altcg .nc-cover div:nth-of-type(1) img{width: 100%;} #posts .posts-list-altcg .nc-cover div:nth-of-type(2){grid-area: ttl;} #posts .posts-list-altcg .nc-cover div:nth-of-type(2) h2{text-align: left;margin: 0;font-size: 2em;line-height: 1.2em;} #posts .posts-list-altcg .nc-cover div:nth-of-type(3){grid-area: descr;align-self: end;} #posts .posts-list-altcg .nc-cover div:nth-of-type(3) h3{position: relative;text-align: left;margin: 0;font-size: 1.4em;line-height: 1.2em;} #posts .posts-list-altcg .nc-cover div:nth-of-type(3) h3::after{content: '';display: block;width: 40%;height: 5px;margin: 10px 0;background-color: #000;} #posts .posts-list-altcg .nc-cover div:nth-of-type(3) p{margin: 0;font-size: 1.2em;line-height: 1.2em;} #posts .posts-list-altcg .nc-cover div:nth-of-type(3) p:not(:last-child){margin-bottom: 20px;} article.post-altcg{width: var(--wrap-width); display: grid;grid-template: "img head" auto "img title" auto "img exc" auto "img btns" 1fr / auto 1fr;grid-gap: 14px 14px; margin: 0 auto 20px auto;padding: 10px;border-radius: 15px;box-shadow: 0 3px 14px 0 #0003;} article.post-altcg .ap-image{grid-area: img;align-self: center;position: relative;width: 290px;height: 210px;} article.post-altcg .ap-image img{width: 100%;height: 100%;border-radius: 10px;} article.post-altcg .ap-head{grid-area: head;display: flex;align-items: flex-start;justify-content: space-between;} article.post-altcg .ap-user{display: grid;grid-template: "av name" 1fr "av dt" 1fr / auto 1fr;grid-gap: 1px 8px;} article.post-altcg .ap-user .av-wrap{grid-area: av;width: 34px;height: 34px;align-self: center;} article.post-altcg .ap-user .av-wrap .av{width: 100%;height: 100%;} article.post-altcg .ap-user .name{grid-area: name;} article.post-altcg .ap-user .dt{grid-area: dt;opacity: .5;font-size: .9em;} article.post-altcg .ap-cat{} article.post-altcg .ap-cat a{color: #000;} article.post-altcg .ap-cat a:not(:last-child)::after{content: ', ';} article.post-altcg .ap-title{grid-area: title;text-align: left;margin: 0;font-size: 1em;} article.post-altcg .ap-excerpt{grid-area: exc;} article.post-altcg .ap-btns{grid-area: btns;align-self: end;display: flex;align-items: center;justify-content: space-between;} article.post-altcg .ap-btns-wrap{display: flex;align-items: center;} article.post-altcg .ap-btns-wrap button{display: inline-flex;align-items: center;} article.post-altcg .ap-btns-wrap.left button:not(:last-child){margin-right: 8px;} article.post-altcg .ap-btns-wrap.right button:not(:first-child){margin-left: 8px;} article.post-altcg .ap-btns-wrap button svg{width: 24px;height: 24px;} article.post-altcg .ap-btns-wrap button span{display: inline-block;margin: 0 0 0 5px;color: #cdc7b0;font-size: .9em;font-weight: bold;} article.post-altcg .ap-btns-wrap button.likes.liked span{color: var(--liked-color);} article.post-altcg .ap-btns-wrap button.likes.load{opacity: .3;} article.post-altcg .ap-btns-wrap button.comments.commented svg path{fill: var(--commented-color);} article.post-altcg .ap-btns-wrap button.comments.commented span{color: var(--commented-color);} article.post-altcg .ap-btns-wrap button.reviews.reviewed svg path{fill: var(--reviewed-color);} article.post-altcg .ap-btns-wrap button.reviews.reviewed span{color: var(--reviewed-color);} article.post-altcg .ap-btns-wrap button.more svg{transform: rotate(90deg);} article.post-altcg .ap-btns-wrap button.views svg{width: 18px;height: 18px;} article.post-altcg .ap-btns-wrap button.views svg path{fill: #DFD9C2;} @media screen and (max-width: 1024px) { article.post-altcg{grid-gap: 8px 14px;} } @media screen and (max-width: 768px) { article.post-altcg{grid-template: "head head" auto "img title" auto "img exc" 1fr "btns btns" auto / auto 1fr;grid-gap: 0 14px;} article.post-altcg .ap-image{width: 140px;height: 100px;} article.post-altcg .ap-image img{border-radius: 6px;} article.post-altcg .ap-head{margin-bottom: 14px;} article.post-altcg .ap-title{margin-bottom: 6px;line-height: 1.3em;} article.post-altcg .ap-excerpt{line-height: 1.2em;} article.post-altcg .ap-btns{margin-top: 16px;} article.post-altcg .ap-user .dt{font-size: .7em;} #posts .posts-list-altcg .nc-cover{grid-template: "img ttl" auto "img descr" 1fr / 250px 1fr;} #posts .posts-list-altcg .nc-cover div:nth-of-type(3) p{font-size: 1em;} #posts .posts-list-altcg .nc-cover div:nth-of-type(3) h3{font-size: 1.2em;} #posts .posts-list-altcg .nc-cover div:nth-of-type(2) h2{font-size: 1.4em;} } @media screen and (max-width: 600px) { article.post-altcg{grid-template: "head head" auto "title title" auto "img exc" auto "btns btns" auto / auto 1fr;grid-gap: 0 10px;} article.post-altcg .ap-title{margin-bottom: 12px;} article.post-altcg .ap-image{width: 110px;height: 80px;} #posts .posts-list-altcg .nc-cover{grid-template: "img ttl" auto "img descr" 1fr / 230px 1fr;} #posts .posts-list-altcg .nc-cover div:nth-of-type(3) h3::after {margin: 5px 0;} #posts .posts-list-altcg .nc-cover div:nth-of-type(3) h3{font-size: 1em;} } @media screen and (max-width: 500px) { #posts .posts-list-altcg .nc-cover{grid-template: "img ttl" auto "img descr" 1fr / 170px 1fr;} #posts .posts-list-altcg .nc-cover div:nth-of-type(2) h2{font-size: 1.2em;margin-bottom: 10px;} #posts .posts-list-altcg .nc-cover div:nth-of-type(3) p:not(:last-child){margin-bottom: 10px;} } @media screen and (max-width: 430px) { article.post-altcg{width: calc(100% - 14px);padding: 8px;} article.post-altcg .ap-head{margin-bottom: 10px;} #posts .posts-list-altcg .nc-cover{grid-template: "img" auto "ttl" auto "descr" auto / 100%;width: calc(100% - 30px);} #posts .posts-list-altcg .nc-cover div:nth-of-type(1) img{margin-bottom: 30px;} }