:root {
    --base-800: #1D1E22;
    --base-700: #232426;
    --base-600: #28292B;
    --base-500: #2C2D2F;
    --base-400: #323336;
    --base-300: #343538;
    --base-100: #868686;
    --base-0: #FFFFFF;

    --bt-g-tp-df: #FFFFFF;
    --bt-g-tp-ds: #868686;

    --green-800: #05A571;
    --green-600: #0C7D59;
    --green-300: #16473A;

    --violet-800: #BA5EDF;
    --violet-300: #6A3D7F;

    --blue-800: #06B2EC;
    --red-800: #DC5B5D;

    --font-family: "Geist Mono", sans-serif;
    --second-family: "Geist", sans-serif;

    --h1: 600 64px/76px var(--second-family);
    --h2: 600 58px/64px var(--second-family);
    --h3: 600 44px/52px var(--second-family);
    --h4: 600 36px/44px var(--second-family);
    --h5: 600 28px/36px var(--second-family);

    --t1: 24px/36px var(--second-family);
    --t2: 20px/32px var(--second-family);
    --t3: 16px/24px var(--second-family);

    --a1: 22px/24px var(--font-family);
    --a2: 20px/32px var(--font-family);
    --a3: 18px/20px var(--font-family);

    --l1: 32px/40px var(--second-family);
    
    @media (max-width: 1440px) {
        --h1: 600 44px/52px var(--second-family);
        --h2: 600 40px/48px var(--second-family);
        --h3: 600 32px/40px var(--second-family);
        --h4: 600 24px/32px var(--second-family);
        --h5: 600 20px/28px var(--second-family);

        --t1: 16px/26px var(--second-family);
        --t2: 14px/22px var(--second-family);
        --t3: 13px/20px var(--second-family);

        --a1: 15px/24px var(--font-family);
        --a2: 13px/20px var(--font-family);
        --a3: 12px/16px var(--font-family);

        --l1: 22px/28px var(--second-family);
    }

    @media (max-width: 992px) {
        --h1: 600 32px/40px var(--second-family);
        --h2: 600 28px/36px var(--second-family);
        --h3: 600 24px/32px var(--second-family);
        --h4: 600 22px/28px var(--second-family);
        --h5: 600 18px/24px var(--second-family);

        --t1: 17px/28px var(--second-family);
        --t2: 15px/24px var(--second-family);
        --t3: 13px/20px var(--second-family);

        --a1: 15px/24px var(--font-family);
        --a2: 13px/20px var(--font-family);
        --a3: 12px/16px var(--font-family);

        --l1: 20px/28px var(--second-family);
    }
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font: var(--t1);
    color: var(--base-0);
    background: var(--base-800);
    -webkit-font-smoothing: antialiased;
}

main {
    padding-top: calc(48px + 104px);
    padding-bottom: 100px;
    min-height: 100vh;
}

img {
    display: block;
    max-width: 100%;
    height: auto;
}

.container {
    max-width: 1920px;
    padding-inline: 48px;
    margin-inline: auto;
}

.container--narrow {
    max-width: 984px;
}

.separator {
    width: 100%;
    margin-block: 24px 48px;
    border: 4px solid var(--base-300);
}

.accent-block {
    margin-block: 32px 48px;
    padding: 40px;

    font: var(--t2);
    background: var(--base-700);
}

.mt-40 {
    margin-top: 40px;
}

.mt-80 {
    margin-top: 80px;
}

@media (max-width: 1440px) {
    main {
        padding-top: calc(32px + 72px);
    }

    .container {
        padding-inline: 32px;
    }

    .container--narrow {
        max-width: 656px;
    }

    .separator {
        margin-block: 20px 32px;
        border-width: 3px;
    }

    .accent-block {
        margin-block: 28px 40px;
        padding: 32px;
    }

    .mt-40 {
        margin-top: 32px;
    }

    .mt-80 {
        margin-top: 64px;
    }
}

@media (max-width: 992px) {
    main {
        padding-top: calc(24px + 60px);
        padding-bottom: 80px;
    }

    .container {
        padding-inline: 16px;
        border-width: 2px;
    }

    .separator {
        margin-block: 12px 24px;
    }

    .accent-block {
        margin-block: 12px 24px;
        padding: 24px;
    }

    .mt-40 {
        margin-top: 24px;
    }

    .mt-80 {
        margin-top: 48px;
    }
}


/* =========================== Typography =========================== */

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    margin: 0;
    padding-block: 0 20px;
}

h1, .h1 {
    font: var(--h1);
}

h2, .h2 {
    font: var(--h2);
    padding-top: 64px;
}

h3, .h3 {
    font: var(--h3);
    padding-top: 20px;
}

h4, .h4 {
    font: var(--h4);
}

h5, .h5 {
    font: var(--h5);
}

.l1 {
    font: var(--l1);
    color: var(--base-100);
}

a {
    color: var(--base-0);
    text-decoration: none;
    overflow-wrap: anywhere;
    transition: 0.2s ease-in;
}

a:not(.button, .post-image, .post-category, .post-title, .post-author, .user-item) {
    color: var(--green-800);
    text-decoration: underline var(--green-300) 8%;
    text-underline-offset: 20%;
    transition: 0.2s ease-in;
}

a:hover {
    text-decoration-color: var(--green-800);
}

p, ul, ol {
    margin-block: 0 20px;
}

p:last-child, ul:last-child, ol:last-child {
    margin-bottom: 0;
}

ul, ol {
    padding-left: 1.5rem;
}

li:not(:last-child) {
    margin-bottom: 12px;
}

.text-violet-800 {
    color: var(--violet-800);
}


@media (max-width: 1440px) {
    h1, h2, h3, h4, h5, h6,
    .h1, .h2, .h3, .h4, .h5, .h6 {
        padding-block: 0 8px;
    }

    h2, .h2 {
        padding-block: 48px 12px;
    }

    h3, .h3 {
        padding-block: 16px;
    }

    p, ul, ol {
        margin-block: 0 16px;
    }

    li:not(:last-child) {
        margin-bottom: 8px;
    }
}

@media (max-width: 992px) {
    h2, .h2 {
        padding-block: 40px 12px;
    }

    p, ul, ol {
        margin-block: 0 12px;
    }
}

/* =========================== END Typography =========================== */






/* =========================== scrollbar =========================== */

.scrollbar-thin {
    scrollbar-width: thin; /* Firefox */
    scrollbar-color: var(--base-300) transparent;
}

.scrollbar-thin::-webkit-scrollbar {
    width: 6px;  /* vertical */
    height: 6px; /* horizontal */
}

.scrollbar-thin::-webkit-scrollbar-track {
    background: transparent;
}

.scrollbar-thin::-webkit-scrollbar-thumb {
    background: var(--base-300);
    border-radius: 10px;
}

.scrollbar-thin::-webkit-scrollbar-button,
.scrollbar-thin::-webkit-scrollbar-button:single-button,
.scrollbar-thin::-webkit-scrollbar-button:start:decrement,
.scrollbar-thin::-webkit-scrollbar-button:end:increment,
.scrollbar-thin::-webkit-scrollbar-button:horizontal:start:decrement,
.scrollbar-thin::-webkit-scrollbar-button:horizontal:end:increment,
.scrollbar-thin::-webkit-scrollbar-button:vertical:start:decrement,
.scrollbar-thin::-webkit-scrollbar-button:vertical:end:increment {
    width: 0 !important;
    height: 0 !important;
    display: none !important;
    -webkit-appearance: none;
}

/* =========================== END scrollbar =========================== */




/* =========================== table =========================== */

.table-scroll {
    position: relative;
    overflow: auto;
}

.table-scroll.is-draggable {
    cursor: grab;
}

.table-scroll.is-dragging {
    cursor: grabbing;
    user-select: none;
}

.table-scroll:after, .table-scroll:before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    display: block;
    width: 30px;
    background-size: 30px 100%;
    background-repeat: no-repeat;
    z-index: 1;
    opacity: 0;
    transition: 0.2s ease-in;
}

.scroll-right:after, .scroll-left:before {
    opacity: 1;
}

.scroll-right:after {
    right: 0;
    background-image: radial-gradient(ellipse at right, rgba(0,0,0,.2) 0%, rgba(0,0,0,0) 75%);
    background-position: 100% 0;
}

.scroll-left:before {
    left: 0;
    background-image: radial-gradient(ellipse at left, rgba(0,0,0,.2) 0%, rgba(0,0,0,0) 75%);
    background-position: 0 0;
}

table {
    display: inline-block;
    vertical-align: top;
    
    max-width: 100%;
    height: auto !important;
    margin-block: 32px 48px;
    font: var(--t2);
    border-spacing: 3px;
    border-collapse: separate !important;
    
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

table td {
    min-width: 160px;
    padding: 24px;
    background: var(--base-700);
    vertical-align: top;
}

@media (max-width: 1440px) {
    table {
        margin-block: 28px 40px;
    }

    table td {
        padding: 20px;
    }
}

@media (max-width: 992px) {
    table {
        width: 100%;
        margin-block: 12px 24px;
    }

    table td {
        padding: 16px;
    }
}

/* =========================== END table =========================== */





/* =========================== Buttons =========================== */

.button {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    gap: 20px;

    color: var(--base-0);
    font: var(--a1);
    font-weight: 600;

    background: transparent;
    padding: 0;
    border: none;
    cursor: pointer;
    transition: 0.2s ease-in;
    text-decoration: none;
}
.button svg path {
    transition: 0.2s ease-in;
}

.button--transparent-white:hover {
    color: var(--green-800);
}

.button--transparent-white:hover svg path {
    fill: var(--green-800);
}

.button--transparent-white:active {
    color: var(--base-100);
}

.button--transparent-white[disabled] {
    color: var(--base-400);
}

.button--transparent-green {
    color: var(--green-800);
}

.button--transparent-green:hover {
    color: var(--base-0);
}

.button--transparent-gray {
    color: var(--base-100);
}

.button--copy, .button--show {
    gap: 8px;
}

.button--show.active svg {
    transform: rotate(180deg);
}

.button--fill {
    padding: 12px 24px;
    height: 48px;

    font-weight: 600;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    background: var(--base-300);
}

.button--fill:hover {
    background: var(--base-600);
}

.button--fill[disabled] {
    color: var(--base-100);
    background: var(--base-700);
}


.button--green {
    color: var(--bt-g-tp-df);
    background: var(--green-800);
}

.button--green:hover {
    background: var(--green-600);
}

.button--green[disabled] {
    background: var(--green-300);
    color: var(--bt-g-tp-ds);
}

.button--lg {
    padding: 18px 24px;
    height: 60px;
}

.button--tab {
    background: transparent;
    border: 3px solid var(--base-300);
}

.button--tab:hover {
    border: 3px solid var(--base-0);
}

.button--tab.selected {
    color: var(--base-800);
    background: var(--base-0);
    border: 3px solid transparent;
}

.buttons {
    display: flex;
    gap: 24px;
}

@media (max-width: 1440px) {
    .buttons {
        gap: 20px;
    }

    .button {
        gap: 12px;
    }

    .button svg, .button img {
        width: 24px;
        height: 24px;
    }

    .button--arrow svg {
        width: 13px;
        height: 12px;
    }

    .button--search, .button--search svg {
        width: 28px;
        height: 28px;
    }

    .button--fill {
        padding: 8px 12px;
        height: 40px;
    }

    .button--lg {
        padding: 12px 16px;
        height: 48px;
    }

    .button--copy, .button--show {
        gap: 6px;
    }

    .button--copy svg, .button--show svg {
        width: 20px;
        height: 20px;
    }
}

@media (max-width: 992px) {
    .buttons {
        flex-wrap: wrap;
        gap: 16px;
    }

    .button--fill {
        padding: 8px 16px;
    }

    .button--lg {
        padding: 16px 20px;
        height: 52px;
    }

    .button--tab {
        height: 44px;
    }
}

/* =========================== END Buttons =========================== */





/* =========================== Header =========================== */

.header {
    position: fixed;
    top: 0;
    width: 100%;
    background: var(--base-800);
    border-bottom: 3px solid var(--base-600);
    z-index: 100;

    transition: transform 0.2s ease-in;
    will-change: transform;
}

.header.header--hidden {
    transform: translateY(-100%);
}

.admin-bar .header {
    top: 32px;
}

.header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;

    min-height: 104px;
}

.header__left, .header__right {
    display: flex;
    align-items: center;
    gap: 32px;

    width: 100%;
}

.header__right {
    justify-content: flex-end;
}

.header__logo {
    max-width: 300px;
}

.button--burger, .burger-menu {
    display: none;
}

@media (max-width: 1440px) {
    .header__inner {
        min-height: 72px;
    }

    .header__left, .header__right {
        gap: 28px;
    }

    .header__logo {
        max-height: 32px;
        width: auto;
    }
}


@media (max-width: 992px) {
    .header__inner {
        min-height: 60px;
    }

    .header__logo {
        max-height: 24px;
    }

    .header__inner .button:not(.button--burger, .button--search) {
        display: none;
    }

    .button--burger {
        display: inline-flex;
    }

    .burger-menu {
        display: block;
        position: absolute;
        top: 63px;
        left: 0;
        right: 0;

        width: 100%;
        height: 0;
        background: var(--base-800);
        transition: 0.2s ease-in;
        overflow: hidden;
        z-index: 100;
    }
    .burger-menu.active {
        height: calc(100vh - 63px);
        padding-block: 40px;
    }

    .burger-menu__nav {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 25px;
        margin-bottom: 64px;
    }

    html:has(body.burger-menu-open, body.nav-menu-open), body.burger-menu-open, body.nav-menu-open {
        overflow: hidden;
    }

    body.burger-menu-open .header {
        z-index: 101;
    }
}

@media (max-width: 782px) {
    .admin-bar .header {
        top: 46px;
    }
    #wpadminbar {
        position: fixed;
    }
}

/* =========================== END Header =========================== */








/* =========================== Footer =========================== */

.footer__logo {
    padding-block: 80px;
}

.footer__logo img {
    margin-inline: auto;
}

.footer__top {
    border-top: 3px solid var(--base-600);
}

.footer__top-inner,
.footer__bottom-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;

    min-height: 104px;
}

.footer__bottom+.footer__bottom {
    border-top: 3px solid var(--base-600);
}

.footer__nav {
    display: flex;
    gap: 48px;
}


.footer__banner::before,
.footer__banner::after {
    content: "";
    display: block;
    height: 18px;
}

.footer__banner::before {
    background: linear-gradient(
            to bottom,
            var(--base-600) 0%    33.34%,
            var(--base-500) 33.34% 66.67%,
            var(--base-400) 66.67% 100%
    );
}

.footer__banner::after {
    background: linear-gradient(
            to top,
            var(--base-600) 0%    33.34%,
            var(--base-500) 33.34% 66.67%,
            var(--base-400) 66.67% 100%
    );
}

.footer__banner-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 64px;
    min-height: 224px;
}

.footer__banner-title {
    flex-shrink: 0;
    padding: 0;
}

.footer__banner-text {
    max-width: 774px;
    font: var(--t2);
    color: var(--base-100);
}

.footer__copy {
    font: var(--t2);
    color: var(--base-100);
}

.footer-meta-warning {
    display: none;

    padding-block: 16px;
    text-align: center;
    border-bottom: 3px solid var(--base-600);
}

.footer-meta-warning small {
    font: var(--t3);
    color: var(--base-100);
}


@media (max-width: 1440px) {
    .footer__logo {
        padding-block: 32px;
    }

    .footer__top-inner, .footer__bottom-inner {
        min-height: 72px;
    }

    .footer__nav {
        gap: 28px;
    }

    .footer__banner-inner {
        min-height: 164px;
    }

    .footer-meta-warning {
        padding-block: 12px;
    }
}

@media (max-width: 992px) {
    .footer__top-inner {
        padding-block: 20px;
        align-items: flex-end;
    }

    .footer__nav {
        flex-direction: column;
        gap: 20px;
    }

    .footer__banner-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        padding-block: 26px 44px;
    }

    .footer__banner-inner .button {
        margin-top: 20px;
    }

    .footer__bottom-inner {
        align-items: flex-start;
        flex-direction: column;
        gap: 20px;
        padding-block: 20px;
        min-height: unset;
    }
}

/* =========================== END Footer =========================== */






/* =========================== Cookie-popup =========================== */

.cookie-popup {
    display: none;
    position: fixed;
    bottom: 0;

    width: 100%;
    padding-block: 16px;
    background: var(--base-800);
    border-top: 1px solid var(--base-600);
    z-index: 101;
}

.cookie-popup__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
}

.cookie-popup__text {
    font: var(--t1);
}

@media (max-width: 1440px) {
    .cookie-popup {
        padding-block: 12px;
    }

    .cookie-popup__inner {
        gap: 32px;
    }
}
@media (max-width: 992px) {
    .cookie-popup__inner {
        justify-content: space-between;
    }

    .cookie-popup__text {
        font: var(--t2);
    }
}

/* =========================== END cookie-popup =========================== */






/* =========================== scroll-top =========================== */

.scroll-top {
    position: fixed;
    bottom: 24px;
    right: 24px;

    width: 60px;
    height: 60px;
    padding: 15px;
    justify-content: center;

    transform: translateX(100px);
    transition: all .25s ease;
    cursor: pointer;
    z-index: 12;
}

.scroll-top.active {
    transform: translateX(0);
}

@media (max-width: 1440px) {
    .scroll-top {
        width: 56px;
        height: 48px;
        padding: 12px 16px;
    }
}

/* =========================== END scroll-top =========================== */





/* =========================== posts-list =========================== */

.posts-list--grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0 48px;
}

.posts-list--grid .post-item {
    grid-column: span 2;
}

.posts-list--grid .post-item img {
    object-fit: cover;
    aspect-ratio: 1 / 0.8;
}

.posts-list--grid .post-item:nth-child(5n + 4),
.posts-list--grid .post-item:nth-child(5n + 5) {
    grid-column: span 3;
}

.posts-list--grid:not(:has(>:nth-child(3))) .post-item {
    grid-column: span 3;
}

.posts-list--grid .post-item:nth-child(5n + 4) img,
.posts-list--grid .post-item:nth-child(5n + 5) img,
.posts-list--grid:not(:has(>:nth-child(3))) .post-item img {
    /*aspect-ratio: 16 / 9;*/
    aspect-ratio: unset;
}

.posts-list--small .post-item:not(:last-child) {
    margin-bottom: 48px;
}

.post-item:not(:last-child) {
    margin-bottom: 64px;
}

.post-item:hover .post-image {
    box-shadow: inset 0 0 0 20px var(--green-800);
}

.post-item:hover .post-title {
    color: var(--green-800);
}

.post-image {
    display: block;
    margin-bottom: 20px;
    transition: 0.2s ease-in;
}

.post-image img {
    position: relative;
    z-index: -1;
}

.post-info {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0 12px;
    margin-bottom: 12px;

    font: var(--a1);
}

.post-category {
    color: var(--violet-800);
    transition: 0.2s ease-in;
}

.post-category:hover {
    color: var(--violet-300);
}

.post-date {
    display: inline-flex;
    gap: 12px;
    color: var(--green-800);
}

.post-date::before,
.post-author::before {
    content: "{";
    color: var(--base-0)
}

.post-date::after,
.post-author::after {
    content: "}";
    color: var(--base-0)
}

.post-views {
    display: inline-flex;
    align-items: center;
    gap: 4px;

    color: var(--blue-800);
}

.post-views::before {
    content: "";

    display: block;
    width: 24px;
    height: 24px;
    background: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12.0017 18.1133C10.1107 18.1133 8.40394 17.565 6.88144 16.4683C5.3591 15.3715 4.22935 13.8814 3.49219 11.9981C4.22935 10.1147 5.3591 8.62465 6.88144 7.52781C8.40394 6.43115 10.1107 5.88281 12.0017 5.88281C13.8927 5.88281 15.5994 6.43115 17.1219 7.52781C18.6443 8.62465 19.774 10.1147 20.5112 11.9981C19.774 13.8814 18.6443 15.3715 17.1219 16.4683C15.5994 17.565 13.8927 18.1133 12.0017 18.1133ZM12.0017 16.6136C13.494 16.6136 14.8453 16.2071 16.0554 15.3943C17.2658 14.5815 18.2055 13.4494 18.8747 11.9981C18.2055 10.5467 17.2658 9.41465 16.0554 8.60181C14.8453 7.78898 13.494 7.38256 12.0017 7.38256C10.5094 7.38256 9.1581 7.78898 7.94794 8.60181C6.7376 9.41465 5.79785 10.5467 5.12869 11.9981C5.79785 13.4494 6.7376 14.5815 7.94794 15.3943C9.1581 16.2071 10.5094 16.6136 12.0017 16.6136ZM12.0017 15.1808C12.885 15.1808 13.6363 14.8711 14.2554 14.2518C14.8748 13.6326 15.1844 12.8814 15.1844 11.9981C15.1844 11.1147 14.8748 10.3635 14.2554 9.74431C13.6363 9.12498 12.885 8.81531 12.0017 8.81531C11.1184 8.81531 10.3671 9.12498 9.74794 9.74431C9.1286 10.3635 8.81894 11.1147 8.81894 11.9981C8.81894 12.8814 9.1286 13.6326 9.74794 14.2518C10.3671 14.8711 11.1184 15.1808 12.0017 15.1808ZM12.0017 13.6808C11.5337 13.6808 11.1363 13.5173 10.8094 13.1903C10.4824 12.8635 10.3189 12.4661 10.3189 11.9981C10.3189 11.5301 10.4824 11.1326 10.8094 10.8058C11.1363 10.4788 11.5337 10.3153 12.0017 10.3153C12.4697 10.3153 12.8671 10.4788 13.1939 10.8058C13.5209 11.1326 13.6844 11.5301 13.6844 11.9981C13.6844 12.4661 13.5209 12.8635 13.1939 13.1903C12.8671 13.5173 12.4697 13.6808 12.0017 13.6808Z" fill="%2306B2EC"/></svg>') no-repeat center / contain;
}

.post-title {
    padding: 0;
}

.post-author {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.post-author .post-author__name {
    transition: 0.2s ease-in;
}

.post-author:hover .post-author__name {
    color: var(--base-100);
}

.post-author__label {
    color: var(--red-800);
}

.button-wrap {
    margin-block: 100px 20px;
    text-align: center;
}

@media (min-width: 993px) {
    .posts-list--grid:not(:has(>:nth-child(4))) .post-item {
        margin-bottom: 0;
    }
}

@media (max-width: 1440px) {
    .posts-list--grid {
        gap: 0 32px;
    }

    .posts-list--small .post-item:not(:last-child) {
        margin-bottom: 32px;
    }

    .post-item:not(:last-child) {
        margin-bottom: 40px;
    }

    .post-item:hover .post-image {
        box-shadow: inset 0 0 0 12px var(--green-800);
    }

    .post-image {
        margin-bottom: 16px;
    }

    .post-info {
        margin-bottom: 4px;
    }

    .post-info, .post-date, .post-author {
        gap: 0 8px;
    }

    .post-views::before {
        width: 20px;
        height: 20px;
    }

    .post-author img {
        width: 24px;
        height: 24px;
    }

    .button-wrap {
        margin-block: 64px 20px;
    }
}

@media (max-width: 992px) {
    .posts-list--grid {
        grid-template-columns: 1fr;
        gap: 0;
    }
    .posts-list--grid .post-item img {
        aspect-ratio: unset;
    }

    .posts-list--small .post-item:not(:last-child) {
        margin-bottom: 28px;
    }

    .post-item:not(:last-child) {
        margin-bottom: 28px;
    }

    .post-item:hover .post-image {
        box-shadow: inset 0 0 0 6px var(--green-800);
    }

    .post-image {
        margin-bottom: 12px;
    }

    .post-info, .post-date, .post-author {
        gap: 0 6px;
    }

    .post-info {
        flex-wrap: wrap;
    }

    .post-author {
        width: 100%;
        margin-top: 16px;
    }

    .button-wrap {
        margin-block: 48px 0;
    }
}

/* =========================== END post-item =========================== */





/* =========================== archive-tag =========================== */

.archive-tag-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

.archive-tag-title-row h1 {
    max-width: calc(100% - 742px - 20px);
    padding-bottom: 0;
}


@media (max-width: 1440px) {
    .archive-tag-title-row h1 {
        max-width: calc(100% - 527px - 20px);
    }
}

@media (max-width: 992px) {
    .archive-tag-title-row {
        margin-bottom: 24px;
    }

    .archive-tag-title-row h1 {
        max-width: unset;
    }

    .archive-tag-filters {
        flex-wrap: nowrap;
        order: 2;
        overflow-x: auto;
    }

    .archive-tag-filter {
        flex-shrink: 0;
    }
}

/* =========================== END archive-tag =========================== */





/* =========================== front-page =========================== */

.two-columns {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 48px;
}

.two-columns .post-item:not(:last-child) {
    margin-bottom: 48px;
}
.two-columns .post-item:has(+.posts-list) {
    margin-bottom: 0 !important;
}

.section-head {
    display: flex;
    justify-content: space-between;

    margin-bottom: 48px;
    padding-bottom: 20px;
    border-bottom: 6px solid var(--base-300);
}

.section-title {
    display: flex;
    gap: 12px;

    font: var(--a1);
    color: var(--red-800);
}

.section-title__name {
    display: flex;
    gap: 12px;
}

.section-title__name::after {
    content: '{}';
    color: var(--base-0);
}


.home .news {
    padding: 64px;
    background: var(--base-700);
}

.home .news__title {
    font: var(--a1);
    color: var(--red-800);
}

.home .news__list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 86px;
    padding-bottom: 48px;
    border-bottom: 6px solid var(--base-300);
}

.home .news__list:not(:last-child) {
    margin-bottom: 48px;
}

.home .news__list .post-item {
    margin-bottom: 0;
}

.news__list .post-title {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@media (max-width: 1440px) {
    .two-columns {
        gap: 32px;
    }

    .two-columns .post-item:not(:last-child) {
        margin-bottom: 28px;
    }

    .section-head {
        margin-bottom: 32px;
        padding-bottom: 16px;
    }

    .home .news {
        padding: 40px;
    }

    .home .news__list {
        gap: 34px;
        padding-bottom: 32px;
    }

    .home .news__list:not(:last-child) {
        margin-bottom: 32px;
    }
}

@media (max-width: 992px) {
    .two-columns {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .section-head {
        margin-bottom: 24px;
        padding-bottom: 12px;
    }

    .home .news {
        padding: 20px 20px 24px;
    }

    .home .news__list {
        grid-template-columns: 1fr;
        gap: 24px;
        padding-bottom: 24px;
    }

    .home .news__list:not(:last-child) {
        margin-bottom: 24px;
    }
}

/* =========================== END front-page =========================== */





/* =========================== featured-post =========================== */

.featured-post {
    display: flex;
    justify-content: space-between;
    gap: 80px;
    padding: 64px;

    color: var(--base-800);
    background: var(--base-0);
}

.featured-post__info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.featured-post__title {
    padding-top: 0;
}

.featured-post__descr {
    margin-bottom: 48px;

    font: var(--l1);
    color: var(--base-100);
}

.featured-post__image {
    width: min(38.125vw, 732px);
    height: min(28.125vw, 540px);
    flex-shrink: 0;
}

.featured-post__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.featured-post__badge {
    font: var(--a1);
    margin-top: auto;
}

.featured-post__badge p {
    margin: 0;
}

@media (max-width: 1440px) {
    .featured-post {
        padding: 40px;
        gap: 40px;
    }

    .featured-post__title {
        margin-bottom: 8px;
    }

    .featured-post__descr {
        margin-bottom: 32px;
    }

    .featured-post__image {
        width: min(41vw, 524px);
        height: min(30vw, 387px);
    }
}

@media (max-width: 992px) {
    .featured-post {
        flex-direction: column;
        gap: 16px;
        padding: 20px;
    }

    .featured-post__title {
        margin-bottom: 4px;
    }

    .featured-post__descr {
        margin-bottom: 24px;
    }

    .featured-post__image {
        order: -1;
        width: unset;
        height: unset;
    }

    .featured-post__badge {
        margin-top: 48px;
    }
}

/* =========================== END featured-post =========================== */