@charset "UTF-8";
*:before, *, *:after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

* {
    padding: 0;
    margin: 0;
    border: 0
}

.wp-admin h1,
.wp-admin h2,
.wp-admin h3,
.wp-admin h4,
.wp-admin h5 {
    color: #000;
}

:focus, :active {
    outline: none
}

a:focus, a:active {
    outline: none
}

nav, footer, header, aside {
    display: block
}

html, body {
    min-height: 100%;
    width: 100%;
    font-size: 16px;
    line-height: 1;
    -ms-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%
}

input, button, textarea {
    font-family: inherit
}

input::-ms-clear {
    display: none
}

button {
    cursor: pointer
}

button::-moz-focus-inner {
    padding: 0;
    border: 0
}

a {
    text-decoration: none;
    color: inherit
}

a:hover {
    text-decoration: none
}

ul li, ol li {
    list-style: none;
    padding-left: 0
}

img {
    vertical-align: top
}

h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: 400
}

.wrapper {
    position: relative;
    z-index: 1;
    width: 100%;
    background: rgba(0, 0, 0, 0);
    max-width: calc(var(--width-container) + var(--offsets, 20px) * 2);
    padding-inline: var(--offsets, 20px);
    margin: var(--wrapper-margin) auto 0
}

.wrapper > img:not(:first-child) {
    margin-top: 20px
}

.wrapper > img:not(:last-child) {
    margin-bottom: 16px
}

.wrapper > .btn:not(:first-child) {
    margin-top: 20px
}

.wrapper.bg-block {
    max-width: var(--width-container);
    margin: var(--wrapper-margin) auto 0
}

@media (max-width: 1320px) {
    .wrapper.bg-block {
        margin-inline: var(--offsets, 20px);
        max-width: calc(100% - var(--offsets, 20px) * 2)
    }
}

@media (max-width: 767.9px) {
    .wrapper > .btn {
        width: 100%
    }
}

.bg-block {
    width: 100%;
    padding: 32px;
    border-radius: 16px;
    background: var(--surface-surface-bright, #4c3a2f)
}

@media (max-width: 575.9px) {
    .bg-block {
        padding: 16px
    }
}

h1, h2 {
    color: var(--on-surface-on-surface-light, #fff);
    margin-bottom: 24px
}

@media (max-width: 575.9px) {
    h1, h2 {
        margin-bottom: 20px
    }
}

h3, h4, h5, h6 {
    color: var(--on-surface-on-surface-light, #fff);
    margin-top: 16px;
    margin-bottom: 16px
}

h3:first-child, h4:first-child, h5:first-child, h6:first-child {
    margin-top: 0
}

p:not([class]) a:not([class]), ul:not([class]) a:not([class]), ol:not([class]) a:not([class]) {
    text-decoration: underline;
    transition-property: color;
    transition-duration: .3s;
    transition-timing-function: ease-in-out;
    transition-delay: 0s
}

p:not([class]) a:not([class]):active, ul:not([class]) a:not([class]):active, ol:not([class]) a:not([class]):active {
    color: var(--primary-primary, #ffa534);
    text-decoration: none
}

@media (any-hover: hover) {
    p:not([class]) a:not([class]):hover, ul:not([class]) a:not([class]):hover, ol:not([class]) a:not([class]):hover {
        color: var(--primary-primary, #ffa534);
        text-decoration: none
    }

    p:not([class]) a:not([class]):focus, ul:not([class]) a:not([class]):focus, ol:not([class]) a:not([class]):focus {
        color: var(--primary-primary, #ffa534);
        text-decoration: none
    }
}

p:not([class]) {
    margin-top: 24px
}

p:not([class]):first-child {
    margin-top: 0
}

h1 {
    font-size: 2.5rem;
    line-height: 3rem;
    font-weight: 700
}

@media (max-width: 575.9px) {
    h1 {
        font-size: 2rem;
        line-height: 2.5rem
    }
}

h2 {
    font-size: 2rem;
    line-height: 2.5rem;
    font-weight: 700
}

@media (max-width: 575.9px) {
    h2 {
        font-size: 1.5rem;
        line-height: 2rem
    }
}

h3, h4, h5, h6 {
    font-size: 1.375rem;
    line-height: 2rem;
    font-weight: 700
}

@media (max-width: 575.9px) {
    h3, h4, h5, h6 {
        font-size: 1.125rem;
        line-height: 1.5rem
    }
}

ul:not([class]), ul.wp-block-list, ol:not([class]), ol.wp-block-list {
    margin-top: 24px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 8px
}

ul:not([class]):first-child, ul.wp-block-list:first-child, ol:not([class]):first-child, ol.wp-block-list:first-child {
    margin-top: 0
}

ul:not([class]) li, ul.wp-block-list li, ol:not([class]) li, ol.wp-block-list li {
    position: relative
}

p:not([class]) + ul:not([class]), p:not([class]) + ul.wp-block-list, p:not([class]) + ol:not([class]), p:not([class]) + ol.wp-block-list {
    margin-top: 16px
}

ol:not([class]), ol.wp-block-list {
    counter-reset: ol-default
}

ol:not([class]) li, ol.wp-block-list li {
    counter-increment: ol-default;
    padding-left: 32px
}

ol:not([class]) li::before, ol.wp-block-list li::before {
    content: counter(ol-default);
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin: 2px;
    padding-top: 1px;
    border-radius: 8px;
    border: 1px solid var(--on-surface-on-surface-light, #fff);
    color: var(--on-surface-on-surface-light, #fff);
    text-align: center;
    font-size: 0.875rem;
    line-height: 1
}

ul:not([class]) li, ul.wp-block-list li {
    padding-left: 26px
}

ul:not([class]) li::before, ul.wp-block-list li::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 6px;
    height: 6px;
    margin: 6px;
    background: var(--primary-primary, #ffa534);
    border-radius: 2px
}

h2 + p:not([class]), .author-row + p:not([class]) {
    margin-top: 16px
}

h2 + p {
    margin-top: 16px
}

@font-face {
    font-family: "Rubik";
    font-display: swap;
    src: url("../../build/fonts/Rubik-Black.woff2") format("woff2"), url("../../build/fonts/Rubik-Black.woff") format("woff");
    font-weight: 900;
    font-style: normal
}

@font-face {
    font-family: "Rubik";
    font-display: swap;
    src: url("../../build/fonts/Rubik-BlackItalic.woff2") format("woff2"), url("../../build/fonts/Rubik-BlackItalic.woff") format("woff");
    font-weight: 900;
    font-style: italic
}

@font-face {
    font-family: "Rubik";
    font-display: swap;
    src: url("../../build/fonts/Rubik-Bold.woff2") format("woff2"), url("../../build/fonts/Rubik-Bold.woff") format("woff");
    font-weight: 700;
    font-style: normal
}

@font-face {
    font-family: "Rubik";
    font-display: swap;
    src: url("../../build/fonts/Rubik-BoldItalic.woff2") format("woff2"), url("../../build/fonts/Rubik-BoldItalic.woff") format("woff");
    font-weight: 700;
    font-style: italic
}

@font-face {
    font-family: "Rubik";
    font-display: swap;
    src: url("../../build/fonts/Rubik-Italic.woff2") format("woff2"), url("../../build/fonts/Rubik-Italic.woff") format("woff");
    font-weight: 400;
    font-style: italic
}

@font-face {
    font-family: "Rubik";
    font-display: swap;
    src: url("../../build/fonts/Rubik-Light.woff2") format("woff2"), url("../../build/fonts/Rubik-Light.woff") format("woff");
    font-weight: 300;
    font-style: normal
}

@font-face {
    font-family: "Rubik";
    font-display: swap;
    src: url("../../build/fonts/Rubik-LightItalic.woff2") format("woff2"), url("../../build/fonts/Rubik-LightItalic.woff") format("woff");
    font-weight: 300;
    font-style: italic
}

@font-face {
    font-family: "Rubik";
    font-display: swap;
    src: url("../../build/fonts/Rubik-Medium.woff2") format("woff2"), url("../../build/fonts/Rubik-Medium.woff") format("woff");
    font-weight: 500;
    font-style: normal
}

@font-face {
    font-family: "Rubik";
    font-display: swap;
    src: url("../../build/fonts/Rubik-MediumItalic.woff2") format("woff2"), url("../../build/fonts/Rubik-MediumItalic.woff") format("woff");
    font-weight: 500;
    font-style: italic
}

@font-face {
    font-family: "Rubik";
    font-display: swap;
    src: url("../../build/fonts/Rubik-Regular.woff2") format("woff2"), url("../../build/fonts/Rubik-Regular.woff") format("woff");
    font-weight: 400;
    font-style: normal
}

@font-face {
    font-family: "Rubik";
    font-display: swap;
    src: url("../../build/fonts/Rubik-SemiBold.woff2") format("woff2"), url("../../build/fonts/Rubik-SemiBold.woff") format("woff");
    font-weight: 600;
    font-style: normal
}

@font-face {
    font-family: "Rubik";
    font-display: swap;
    src: url("../../build/fonts/Rubik-SemiBoldItalic.woff2") format("woff2"), url("../../build/fonts/Rubik-SemiBoldItalic.woff") format("woff");
    font-weight: 600;
    font-style: italic
}

.no-scroll {
    overflow: hidden
}

html {
    font: 400 var(--font-default)/1.5 var(--ff-rubik), sans-serif
}

@supports not selector(::-webkit-scrollbar) {
    html {
        scrollbar-width: 10px;
        scrollbar-color: var(--primary-primary, #ffa534) rgba(0, 0, 0, 0)
    }
}

html::-webkit-scrollbar {
    width: 10px
}

html::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: var(--primary-primary, #ffa534)
}

html::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0)
}

body {
    position: relative;
    color: var(--on-surface-on-surface, #f5f2ef);
    background: var(--surface-surface, #2f2320);
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    min-height: 100vh;
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 400
}

@media (max-width: 575.9px) {
    body {
        font-size: 0.9375rem
    }
}

main {
    flex-grow: 1
}

table, .wp-block-table {
    width: 100%;
    table-layout: auto;
    border-spacing: 0
}

img, svg {
    max-width: 100%;
    height: auto
}

:root {
    --offsets: 20px;
    --width-container: 1280px;
    --wrapper-margin: 48px;
    --ff-rubik: "Rubik", sans-serif;
    --font-default: 16px;
    --star-color: #ff8f4a;
    --star-bg: transparent;
    --surface-surface-bright: #4c3a2f;
    --surface-surface-dim: #221a16;
    --surface-surface: #2f2320;
    --surface-container-surface-container: rgba(246 246 246 / 0.2);
    --surface-container-surface-container-low: #2c211e;
    --surface-container-surface-container-high: #4e3b37;
    --surface-container-surface-container-disabled: #2c2622;
    --surface-container-on-surface-container-disabled: #8e7d75;
    --surface-container-surface-container-transparent: rgba(60 47 40 / 0.76);
    --outline-outline: #6c4e3c;
    --outline-outline-light: #8c6a58;
    --outline-outline-dark: #221a16;
    --on-surface-on-surface-dark: #d8c3b4;
    --on-surface-on-surface: #f5f2ef;
    --on-surface-on-surface-light: #ffffff;
    --primary-primary: #ffa534;
    --primary-primary-hover: #ffae49;
    --primary-primary-focus: #ffb860;
    --primary-primary-disabled: #805e38;
    --primary-on-primary: #1a1410;
    --secondary-secondary: #c0392b;
    --secondary-secondary-hover: #cc4436;
    --secondary-secondary-focus: #d74e40;
    --secondary-secondary-disabled: #7a3b34;
    --secondary-on-secondary-disabled: #c58179;
    --secondary-on-secondary: #ffffff;
    --tertiary-tertiary: #ffd700;
    --tertiary-tertiary-hover: #ffde2d;
    --tertiary-tertiary-focus: #ffe452;
    --tertiary-tertiary-disabled: #9c8844;
    --tertiary-on-tertiary: #1a1410;
    --states-success: #65d290;
    --states-on-success: #0e1a12;
    --states-error: #ce4031;
    --states-on-error: #ffffff;
    --states-warning: #e67e22;
    --states-on-warning: #1a1410;
    --states-hovered: rgba(255 255 255 / 0.08);
    --states-focused: rgba(255 255 255 / 0.12);
    --shadow-dark-large: 7px 7px 0 0 #2d221e;
    --shadow-dark-small: 4px 4px 0 0 #2d221e;
    --primary-shadow: 3px 3px 0 0 #926123;
    --secondary-shadow: 3px 3px 0 0 #7a3b34;
    --tertiary-shadow: 3px 3px 0 0 #8f7a28;
    --elevated-shadow: 3px 3px 0 0 #191513;
    --primary-shadow-hovered: 4px 4px 0 0 #926123;
    --secondary-shadow-hovered: 4px 4px 0 0 #7a3b34;
    --tertiary-shadow-hovered: 4px 4px 0 0 #8f7a28;
    --elevated-shadow-hovered: 4px 4px 0 0 #191513;
    --selector-shadow: 3px 3px 0 0 #403631;
    --outlined-shadow: 3px 3px 0 0 #7e5c49;
    --outlined-shadow-hovered: 4px 4px 0 0 #7e5c49
}

@media (max-width: 575.9px) {
    :root {
        --offsets: 16px;
        --wrapper-margin: 32px
    }
}

.section-faq {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 16px
}

.section-faq__item {
    width: 100%;
    overflow: hidden;
    border-radius: 16px;
    background: var(--surface-surface-bright, #4c3a2f);
    transition-property: box-shadow;
    transition-duration: .3s;
    transition-timing-function: ease-in-out;
    transition-delay: 0s
}

.section-faq__item p {
    margin: 16px;
    color: var(--on-surface-on-surface, #ece8f2)
}

.section-faq__item[open] {
    box-shadow: 7px 7px 0 0 #2d221e
}

.section-faq__item[open] summary .section-faq__item-arrow::after {
    transform: rotate(-180deg)
}

.section-faq__item-arrow {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 8px;
    margin: 2px;
    border-radius: var(--border-radius-radius-medium, 12px);
    border: 1px solid var(--on-surface-on-surface-dark, #d8c3b4);
    transition-property: background;
    transition-duration: .3s;
    transition-timing-function: ease-in-out;
    transition-delay: 0s
}

.section-faq__item-arrow::after {
    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M16.667 7.419 15.1 5.833l-5.1 5.15-5.1-5.15-1.567 1.586L10 14.166z" fill="%23fff"/></svg>');
    width: 20px;
    height: 20px;
    display: block;
    transform-origin: center;
    transition-property: transform;
    transition-duration: .3s;
    transition-timing-function: ease-in-out;
    transition-delay: 0s
}

.section-faq summary {
    padding: 16px;
    background: var(--surface-surface-dim, #221a16);
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 72px;
    padding: 16px;
    cursor: pointer;
    list-style: none;
    transition-property: background;
    transition-duration: .3s;
    transition-timing-function: ease-in-out;
    transition-delay: 0s;
    color: var(--on-surface-on-surface-light, #fff);
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 700
}

.section-faq summary::marker {
    content: ""
}

.section-faq summary::-webkit-details-marker {
    display: none
}

@media (any-hover: hover) {
    .section-faq summary:hover .section-faq__item-arrow {
        background: var(--states-hovered, rgba(255, 255, 255, 0.08))
    }
}

.section-faq summary:active .section-faq__item-arrow {
    background: var(--states-focused, rgba(255, 255, 255, 0.12))
}

@media (max-width: 575.9px) {
    .section-faq {
        gap: 8px
    }

    .section-faq summary {
        padding: 8px 16px;
        min-height: 56px
    }
}

.footer {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 24px;
    padding: 48px 32px;
    box-shadow: 7px 7px 0 0 #2d221e
}

.footer.wrapper {
    margin-bottom: var(--wrapper-margin, 48px)
}

.footer__row {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 20px 64px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--outline-outline, #6c4e3c)
}

.footer__row--copyright {
    gap: 16px;
    align-items: center;
    padding-block: 24px 0;
    border-top: 1px solid var(--outline-outline, #6c4e3c);
    border-bottom: none
}

.footer__nav {
    width: 100%;
    flex: 1
}

.footer__nav-list {
    width: 100%;
    display: grid;
    grid-template-columns:repeat(auto-fill, minmax(250px, 1fr));
    gap: 16px 24px
}

.footer__nav-list a {
    color: var(--on-surface-on-surface-light, #fff);
    text-align: center;
    text-underline-offset: 4px
}

.footer__nav-list a:active {
    text-decoration: underline
}

@media (any-hover: hover) {
    .footer__nav-list a:hover {
        text-decoration: underline
    }

    .footer__nav-list a:focus {
        text-decoration: underline
    }
}

.footer__nav-item, .footer__nav-link {
    text-align: center
}

.footer__logos {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 20px;
    flex-wrap: wrap;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--outline-outline, #6c4e3c)
}

.footer__logos img, .footer__logos svg {
    max-width: 100%;
    max-height: 48px;
    object-fit: contain
}

.footer__info {
    color: var(--on-surface-on-surface, #f5f2ef)
}

.footer__flags {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 24px;
    flex-wrap: wrap
}

.footer__flags li {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center
}

.footer__flags img, .footer__flags svg {
    max-width: 32px;
    max-height: 23px;
    object-fit: contain
}

.footer__logo {
    display: flex
}

.footer__logo:is(a) {
    transition-property: opacity;
    transition-duration: .3s;
    transition-timing-function: ease-in-out;
    transition-delay: 0s
}

@media (any-hover: hover) {
    .footer__logo:is(a):hover {
        opacity: .6
    }
}

.footer__logo:is(a):active {
    opacity: .6
}

@media (any-hover: hover) {
    .footer__logo:is(a):focus {
        opacity: .6
    }
}

.footer__logo img, .footer__logo svg {
    max-width: 100%;
    max-height: 100px;
    object-fit: contain
}

.footer__copyright {
    color: var(--on-surface-on-surface-light, #fff);
    margin-right: auto
}

@media (max-width: 991.9px) {
    .footer__row {
        flex-direction: column;
        align-items: flex-start
    }

    .footer__row--copyright {
        gap: 16px;
        flex-direction: column-reverse
    }

    .footer__copyright {
        margin-left: 0
    }
}

@media (max-width: 767.9px) {
    .footer__nav-list {
        flex-direction: column;
        align-items: flex-start
    }

    .footer__nav-item {
        text-align: left
    }
}

@media (max-width: 575.9px) {
    .footer {
        padding: 32px 16px;
        gap: 20px
    }

    .footer__copyright {
        font-size: 0.875rem;
        line-height: 1.375rem
    }
}

@media (max-width: 575.9px)and (max-width: 575.9px) {
    .footer__copyright {
        font-size: 0.75rem
    }
}

@media (max-width: 575.9px) {
    .footer__logos {
        gap: 16px;
        padding-top: 20px
    }

    .footer__logos img, .footer__logos svg {
        max-height: 32px
    }

    .footer__flags {
        gap: 8px
    }

    .footer__flags li img, .footer__flags li svg {
        max-width: 24px;
        max-height: 17px
    }

    .footer__info {
        font-size: 0.875rem;
        line-height: 1.375rem
    }
}

@media (max-width: 575.9px)and (max-width: 575.9px) {
    .footer__info {
        font-size: 0.75rem
    }
}

@media (max-width: 575.9px) {
    .footer__row {
        padding-bottom: 20px
    }

    .footer__row--copyright {
        padding-block: 20px 0
    }
}

.breadcrumbs__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 14px;
    line-height: 1.4;

}

.breadcrumbs__item {
    display: flex;
    align-items: center;
}

.breadcrumbs__item:not(:last-child)::after {
    content: "/";
    margin: 0 6px;
    color: #C2C2C2;
}

.breadcrumbs__link {
        color: #fff;
    text-decoration: none;
    transition: color 0.2s ease;
}

.breadcrumbs__link:hover {
    color: #FF8F4A;
}

.breadcrumbs__link--no-active {
    color: #FF8F4A;
    font-weight: 500;
    cursor: default;
    pointer-events: none;
}

.breadcrumbs__item:last-child .breadcrumbs__link {
    color: #FF8F4A;
    font-weight: 500;
}

.content-buttons {
	margin-top: 16px
}

.header {
    --header-height: 60px;
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 24px;
    margin-block: 16px;
    padding: 16px 32px;
    width: 100%;
    max-width: var(--width-container);
    margin-inline: auto;
    border-radius: var(--border-radius-radius-normal, 16px)
}

.header__btns {
	display: flex;
	gap: 16px
}

.header::after {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    pointer-events: none;
    border-radius: var(--border-radius-radius-normal, 16px);
    background: var(--surface-surface-bright, #4c3a2f);
    box-shadow: 7px 7px 0 0 #2d221e
}

.header__logo {
    display: flex
}

.header__logo:is(a) {
    transition-property: opacity;
    transition-duration: .3s;
    transition-timing-function: ease-in-out;
    transition-delay: 0s
}

@media (any-hover: hover) {
    .header__logo:is(a):hover {
        opacity: .6
    }
}

.header__logo:is(a):active {
    opacity: .6
}

@media (any-hover: hover) {
    .header__logo:is(a):focus {
        opacity: .6
    }
}

.header__logo img, .header__logo svg {
	width: auto;
    max-width: 200px;
    max-height: 100px;
    object-fit: contain
}

.header__mob {
    z-index: 50;
    margin-inline: auto;
    display: contents
}

.header__mob > .btn {
    padding: 12px 32px
}

@media (min-width: 576px) {
    .header__mob > .btn svg {
        max-width: 32px;
        max-height: 32px
    }
}

.header__burger {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin: 2px;
    padding: 8px;
    cursor: pointer;
    border-radius: var(--border-radius-radius-medium, 12px);
    background: rgba(0, 0, 0, 0);
    transition-property: background;
    transition-duration: .3s;
    transition-timing-function: ease-in-out;
    transition-delay: 0s
}

@media (min-width: 1240px) {
    .header__burger {
        display: none
    }
}

@media (any-hover: hover) {
    .header__burger:hover {
        background: var(--states-hovered, rgba(255, 255, 255, 0.08))
    }
}

.header__burger:active {
    background: var(--states-focused, rgba(255, 255, 255, 0.12))
}

@media (any-hover: hover) {
    .header__burger:focus {
        background: var(--states-focused, rgba(255, 255, 255, 0.12))
    }
}

.header__burger::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: var(--border-radius-radius-medium, 12px);
    background: var(--surface-container-surface-container, rgba(246, 246, 246, 0.12))
}

.header__burger::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="14" viewBox="0 0 18 14" fill="none"><path d="M16.5 11.833a1 1 0 0 1 0 2h-15a1 1 0 1 1 0-2zM16.5 6a1 1 0 1 1 0 2h-15a1 1 0 0 1 0-2zm0-5.833a1 1 0 1 1 0 2h-15a1 1 0 0 1 0-2z" fill="%23fff"/></svg>');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: auto
}

.header.menu-active .header__burger::after {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M12.124.46a1 1 0 1 1 1.414 1.414L8.413 7l5.126 5.126a1 1 0 0 1-1.414 1.414L6.999 8.413 1.873 13.54A1 1 0 0 1 .46 12.125L5.585 7 .46 1.874A1 1 0 1 1 1.874.46l5.125 5.125z" fill="%23fff"/></svg>')
}

@media (max-width: 1320px) {
    .header {
        max-width: calc(100% - var(--offsets, 20px) * 2);
        margin-inline: var(--offsets, 20px);
        padding-inline: var(--offsets, 20px)
    }
}

@media (min-width: 1240px) {
    .header__nav {
        margin-inline: auto;
        align-self: stretch;
        display: flex;
        flex-direction: row;
        align-items: stretch;
        justify-content: flex-start
    }
}

@media (max-width: 1239.9px) {
    .header__logo {
        margin-right: auto
    }

    .header.menu-active {
        z-index: 50
    }

    .header.menu-active::before {
        content: "";
        pointer-events: none;
        position: fixed;
        inset: 0;
        z-index: -1;
        background: var(--surface-surface, #2f2320)
    }

    .header.menu-active .header__nav .header-menu:has(>.parent.active) > .item:not(.active) {
        display: none
    }

    .header.menu-active .header__nav .item.parent.active > .submenu:has(>.parent.active) > .item:not(.active) {
        display: none
    }
}

@media (max-width: 1239.9px)and (min-width: 768px) {
    .header:not(.menu-active) .header__nav {
        display: none
    }

    .header__nav {
        z-index: 50;
        position: absolute;
        top: calc(100% + 12px);
        left: 0;
        width: 100%;
        height: auto;
        max-height: calc(100vh - var(--header-height) - 16px - 12px - 12px);
        overflow-y: auto;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        padding: 16px var(--offsets, 20px);
        border-radius: var(--border-radius-radius-normal, 16px);
        background: var(--surface-surface-bright, #4c3a2f)
    }

    @supports not selector(::-webkit-scrollbar) {
        .header__nav {
            scrollbar-width: thin;
            scrollbar-color: var(--primary-opacity-012, rgba(208, 188, 255, 0.12)) rgba(0, 0, 0, 0)
        }
    }.header__nav::-webkit-scrollbar {
         width: 4px
     }

    .header__nav::-webkit-scrollbar-thumb {
        border-radius: 5px;
        background: var(--primary-opacity-012, rgba(208, 188, 255, 0.12));
        border-radius: 9px;
        border: 4px solid rgba(0, 0, 0, 0)
    }

    .header__nav::-webkit-scrollbar-track {
        background: rgba(0, 0, 0, 0);
        border-radius: 9px
    }
}

@media (max-width: 767.9px) {
    .header.menu-active .header__mob:has(.parent.active) > :not(.header__nav) {
        display: none
    }

    .header:not(.menu-active) .header__mob .header__nav  {
        display: none
    }
	
	.header {
		flex-wrap: wrap;
	}

    .header__mob {
        z-index: 50;
        position: absolute;
        top: calc(100% + 12px);
        left: 0;
        width: 100%;
        height: auto;
        max-height: calc(100vh - var(--header-height) - 16px - 12px - 12px);
        overflow-y: auto;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
		gap: 8px;
/*         padding: 16px var(--offsets, 20px) 8px; */
/*         border-radius: var(--border-radius-radius-normal, 16px); */
/*         background: var(--surface-surface-bright, #4c3a2f) */
    }
	
	.header:not(.menu-active) .header__mob {
		position: relative;
		order: 10;
		width: 100%;
	}
	
	.header__nav {
		padding: 8px var(--offsets, 20px);
        border-radius: var(--border-radius-radius-normal, 16px);
        background: var(--surface-surface-bright, #4c3a2f)
	}
	
	.header__mob .header__btns {
		justify-content: center;
		order: -1;
		padding: 8px var(--offsets, 20px);
        border-radius: var(--border-radius-radius-normal, 16px);
        background: var(--surface-surface-bright, #4c3a2f)
	}

    @supports not selector(::-webkit-scrollbar) {
        .header__mob {
            scrollbar-width: thin;
            scrollbar-color: var(--primary-opacity-012, rgba(208, 188, 255, 0.12)) rgba(0, 0, 0, 0)
        }
    }.header__mob::-webkit-scrollbar {
         width: 4px
     }

    .header__mob::-webkit-scrollbar-thumb {
        border-radius: 5px;
        background: var(--primary-opacity-012, rgba(208, 188, 255, 0.12));
        border-radius: 9px;
        border: 4px solid rgba(0, 0, 0, 0)
    }

    .header__mob::-webkit-scrollbar-track {
        background: rgba(0, 0, 0, 0);
        border-radius: 9px
    }

    .header__mob > .btn {
        order: -1;
        width: 100%
    }
}

@media (max-width: 575.9px) {
    .header {
        margin-block: 12px 0;
        padding: 8px;
        gap: 12px
    }

    .header__logo img, .header__logo svg {
        max-height: 50px
    }

    .header__mob {
        max-height: calc(100vh - var(--header-height) - 12px - 8px - 8px);
        top: calc(100% + 8px)
    }
	
	.header__nav {
		padding: 8px;
	}
	
	.header__mob .header__btns {
		padding: 8px;
	}
}

.header-menu {
    flex-wrap: wrap;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 10px 24px
}

@media (max-width: 1239.9px) {
    .header-menu {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 8px
    }
}

.header-menu .submenu {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start
}

@supports not selector(::-webkit-scrollbar) {
    .header-menu .submenu {
        scrollbar-width: thin;
        scrollbar-color: var(--primary-opacity-012, rgba(208, 188, 255, 0.12)) rgba(0, 0, 0, 0)
    }
}

.header-menu .submenu::-webkit-scrollbar {
    width: 4px
}

.header-menu .submenu::-webkit-scrollbar-thumb {
    border-radius: 5px;
    background: var(--primary-opacity-012, rgba(208, 188, 255, 0.12));
    border-radius: 9px;
    border: 4px solid rgba(0, 0, 0, 0)
}

.header-menu .submenu::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0);
    border-radius: 9px
}

.header-menu .item {
    position: relative;
    display: flex;
    flex-direction: row;
    transition-property: background;
    transition-duration: .3s;
    transition-timing-function: ease-in-out;
    transition-delay: 0s
}

.header-menu .item.parent {
    cursor: pointer;
    gap: 12px
}

.header-menu .item a, .header-menu .item span {
    display: flex;
    flex-direction: row;
    align-items: center;
    transition-property: background, color;
    transition-duration: .3s;
    transition-timing-function: ease-in-out;
    transition-delay: 0s
}

.header-menu .item svg {
    transition-property: transform;
    transition-duration: .3s;
    transition-timing-function: ease-in-out;
    transition-delay: 0s;
    min-width: 20px
}

.header-menu .item svg path {
    transition-property: fill;
    transition-duration: .3s;
    transition-timing-function: ease-in-out;
    transition-delay: 0s
}

.header-menu a, .header-menu span {
    color: var(--on-surface-on-surface-light, #fff);
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 700
}

@media (min-width: 1240px) {
    .header-menu > .item.parent, .header-menu > .item:not(.parent) > a, .header-menu > .item:not(.parent) > span {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        padding: 8px 16px;
        border-radius: var(--border-radius-radius-normal, 16px)
    }
}

@media (min-width: 1240px)and (any-hover: hover) {
    .header-menu > .item.parent:hover, .header-menu > .item:not(.parent) > a:hover, .header-menu > .item:not(.parent) > span:hover {
        background: var(--states-hovered, rgba(255, 255, 255, 0.08))
    }
}

@media (min-width: 1240px) {
    .header-menu > .item.parent:active, .header-menu > .item:not(.parent) > a:active, .header-menu > .item:not(.parent) > span:active {
        background: var(--states-focused, rgba(255, 255, 255, 0.12))
    }
}

@media (min-width: 1240px)and (any-hover: hover) {
    .header-menu > .item.parent:focus, .header-menu > .item:not(.parent) > a:focus, .header-menu > .item:not(.parent) > span:focus {
        background: var(--states-focused, rgba(255, 255, 255, 0.12))
    }
}

@media (min-width: 1240px) {
    .header-menu > .item.current.parent, .header-menu > .item.current:not(.parent) > a, .header-menu > .item.current:not(.parent) > span {
        background: var(--states-focused, rgba(255, 255, 255, 0.12))
    }
}

@media (min-width: 1240px)and (any-hover: hover) {
    .header-menu > .item.parent:hover > svg {
        transform: rotate(-180deg)
    }
}

@media (min-width: 1240px) {
    .header-menu > .item:nth-child(1) {
        z-index: 49
    }

    .header-menu > .item:nth-child(2) {
        z-index: 48
    }

    .header-menu > .item:nth-child(3) {
        z-index: 47
    }

    .header-menu > .item:nth-child(4) {
        z-index: 46
    }

    .header-menu > .item:nth-child(5) {
        z-index: 45
    }

    .header-menu > .item:nth-child(6) {
        z-index: 44
    }

    .header-menu > .item:nth-child(7) {
        z-index: 43
    }

    .header-menu > .item:nth-child(8) {
        z-index: 42
    }

    .header-menu > .item:nth-child(9) {
        z-index: 41
    }

    .header-menu > .item:nth-child(10) {
        z-index: 40
    }

    .header-menu > .item:nth-child(11) {
        z-index: 39
    }

    .header-menu > .item:nth-child(12) {
        z-index: 38
    }

    .header-menu > .item:nth-child(13) {
        z-index: 37
    }

    .header-menu > .item:nth-child(14) {
        z-index: 36
    }

    .header-menu > .item:nth-child(15) {
        z-index: 35
    }

    .header-menu > .item:nth-child(16) {
        z-index: 34
    }

    .header-menu > .item:nth-child(17) {
        z-index: 33
    }

    .header-menu > .item:nth-child(18) {
        z-index: 32
    }

    .header-menu > .item:nth-child(19) {
        z-index: 31
    }

    .header-menu > .item:nth-child(20) {
        z-index: 30
    }

    .header-menu > .item:nth-child(21) {
        z-index: 29
    }

    .header-menu > .item:nth-child(22) {
        z-index: 28
    }

    .header-menu > .item:nth-child(23) {
        z-index: 27
    }

    .header-menu > .item:nth-child(24) {
        z-index: 26
    }

    .header-menu > .item:nth-child(25) {
        z-index: 25
    }

    .header-menu > .item:nth-child(26) {
        z-index: 24
    }

    .header-menu > .item:nth-child(27) {
        z-index: 23
    }

    .header-menu > .item:nth-child(28) {
        z-index: 22
    }

    .header-menu > .item:nth-child(29) {
        z-index: 21
    }

    .header-menu > .item:nth-child(30) {
        z-index: 20
    }

    .header-menu > .item:nth-child(31) {
        z-index: 19
    }

    .header-menu > .item:nth-child(32) {
        z-index: 18
    }

    .header-menu > .item:nth-child(33) {
        z-index: 17
    }

    .header-menu > .item:nth-child(34) {
        z-index: 16
    }

    .header-menu > .item:nth-child(35) {
        z-index: 15
    }

    .header-menu > .item:nth-child(36) {
        z-index: 14
    }

    .header-menu > .item:nth-child(37) {
        z-index: 13
    }

    .header-menu > .item:nth-child(38) {
        z-index: 12
    }

    .header-menu > .item:nth-child(39) {
        z-index: 11
    }

    .header-menu > .item:nth-child(40) {
        z-index: 10
    }

    .header-menu > .item:nth-child(41) {
        z-index: 9
    }

    .header-menu > .item:nth-child(42) {
        z-index: 8
    }

    .header-menu > .item:nth-child(43) {
        z-index: 7
    }

    .header-menu > .item:nth-child(44) {
        z-index: 6
    }

    .header-menu > .item:nth-child(45) {
        z-index: 5
    }

    .header-menu > .item:nth-child(46) {
        z-index: 4
    }

    .header-menu > .item:nth-child(47) {
        z-index: 3
    }

    .header-menu > .item:nth-child(48) {
        z-index: 2
    }

    .header-menu > .item:nth-child(49) {
        z-index: 1
    }

    .header-menu > .item:nth-child(50) {
        z-index: 0
    }

    .header-menu .item {
        justify-content: space-between
    }

    .header-menu .item.parent::before {
        content: "";
        width: 100%;
        height: 16px;
        position: absolute;
        top: 100%;
        left: 0;
        transform: translate(0, -4px);
        display: none
    }
}

@media (min-width: 1240px)and (any-hover: hover) {
    .header-menu .item.parent:hover::before {
        display: block
    }

    .header-menu .item.parent:hover > .submenu {
        display: flex
    }
}

@media (min-width: 1240px) {
    .header-menu .item_left > .submenu {
        left: unset;
        right: 0
    }

    .header-menu .item_left > .submenu > .item {
        flex-direction: row-reverse
    }

    .header-menu .item_left > .submenu > .item > a, .header-menu .item_left > .submenu > .item > span {
        flex-direction: row-reverse
    }

    .header-menu .item_left > .submenu > .item.parent > svg {
        transform: rotate(90deg)
    }

    .header-menu .item_left > .submenu .submenu {
        left: 0px;
        transform: translateX(-100%)
    }

    .header-menu .submenu {
        width: 224px;
        display: none;
        padding-block: 8px;
        border-radius: 12px;
        background: var(--surface-surface-bright, #4c3a2f);
        box-shadow: 3px 3px 0 0 var(--surface-surface, #2f2320);
        position: absolute;
        top: 100%;
        left: 0
    }

    .header-menu .submenu .submenu {
        overflow-y: auto;
        overflow-x: clip;
        max-height: 300px;
        top: -8px;
        left: calc(100% - 1px);
        transform: translateX(0)
    }

    @supports not selector(::-webkit-scrollbar) {
        .header-menu .submenu .submenu {
            scrollbar-width: thin;
            scrollbar-color: var(--primary-opacity-012, rgba(208, 188, 255, 0.12)) rgba(0, 0, 0, 0)
        }
    }.header-menu .submenu .submenu::-webkit-scrollbar {
         width: 4px
     }

    .header-menu .submenu .submenu::-webkit-scrollbar-thumb {
        border-radius: 5px;
        background: var(--primary-opacity-012, rgba(208, 188, 255, 0.12));
        border-radius: 9px;
        border: 4px solid rgba(0, 0, 0, 0)
    }

    .header-menu .submenu .submenu::-webkit-scrollbar-track {
        background: rgba(0, 0, 0, 0);
        border-radius: 9px
    }

    .header-menu .submenu .item {
        text-transform: none
    }

    .header-menu .submenu .item.parent, .header-menu .submenu .item:not(.parent) > a, .header-menu .submenu .item:not(.parent) > span {
        padding: 12px;
        min-height: 40px;
        text-align: left
    }
}

@media (min-width: 1240px)and (any-hover: hover) {
    .header-menu .submenu .item.parent:hover, .header-menu .submenu .item:not(.parent) > a:hover, .header-menu .submenu .item:not(.parent) > span:hover {
        background: var(--states-hovered, rgba(255, 255, 255, 0.08))
    }
}

@media (min-width: 1240px) {
    .header-menu .submenu .item.parent:active, .header-menu .submenu .item:not(.parent) > a:active, .header-menu .submenu .item:not(.parent) > span:active {
        background: var(--states-focused, rgba(255, 255, 255, 0.12))
    }
}

@media (min-width: 1240px)and (any-hover: hover) {
    .header-menu .submenu .item.parent:focus, .header-menu .submenu .item:not(.parent) > a:focus, .header-menu .submenu .item:not(.parent) > span:focus {
        background: var(--states-focused, rgba(255, 255, 255, 0.12))
    }
}

@media (min-width: 1240px)and (any-hover: hover) {
    .header-menu .submenu .item.parent > a:hover {
        color: var(--primary-primary-hover, #e9335d)
    }
}

@media (min-width: 1240px) {
    .header-menu .submenu .item.parent > a:active {
        color: var(--primary-primary-focus, #ee3b64)
    }
}

@media (min-width: 1240px)and (any-hover: hover) {
    .header-menu .submenu .item.parent > a:focus {
        color: var(--primary-primary-focus, #ee3b64)
    }
}

@media (min-width: 1240px) {
    .header-menu .submenu .item.parent svg {
        transform: rotate(-90deg)
    }

    .header-menu .submenu .item:not(.parent) a, .header-menu .submenu .item:not(.parent) span {
        width: 100%
    }

    .header-menu .submenu .item.current.parent, .header-menu .submenu .item.current:not(.parent) > a, .header-menu .submenu .item.current:not(.parent) > span {
        background: var(--states-hovered, rgba(255, 255, 255, 0.08))
    }
}

@media (max-width: 1239.9px) {
    .header-menu {
        padding: 8px 0 0
    }

    .header-menu > .item.parent.active {
        padding-bottom: 0
    }

    .header-menu > .item.parent.active::after {
        display: none
    }

    .header-menu .item {
        flex-wrap: wrap
    }

    .header-menu .item.parent, .header-menu .item:not(.parent) > a, .header-menu .item:not(.parent) > span {
        padding: 12px;
        width: 100%;
        min-height: 48px
    }
}

@media (max-width: 1239.9px)and (any-hover: hover) {
    .header-menu .item.parent:hover, .header-menu .item:not(.parent) > a:hover, .header-menu .item:not(.parent) > span:hover {
        background: var(--states-hovered, rgba(255, 255, 255, 0.08))
    }
}

@media (max-width: 1239.9px) {
    .header-menu .item.parent:active, .header-menu .item:not(.parent) > a:active, .header-menu .item:not(.parent) > span:active {
        background: var(--states-focused, rgba(255, 255, 255, 0.12))
    }
}

@media (max-width: 1239.9px)and (any-hover: hover) {
    .header-menu .item.parent:focus, .header-menu .item:not(.parent) > a:focus, .header-menu .item:not(.parent) > span:focus {
        background: var(--states-focused, rgba(255, 255, 255, 0.12))
    }
}

@media (max-width: 1239.9px) {
    .header-menu .item svg {
        margin-left: auto;
        transform: rotate(-90deg)
    }

    .header-menu .item.parent.active {
        position: fixed;
        top: calc(var(--header-height) + 16px + 12px);
        max-height: calc(100vh - var(--header-height) - 16px - 12px - 12px);
        left: var(--offsets, 20px);
        background: var(--surface-surface-bright, #4c3a2f);
        border-radius: var(--border-radius-radius-normal, 16px);
        max-width: calc(100% - var(--offsets, 20px) * 2);
        flex-direction: column;
        flex-wrap: nowrap;
        z-index: 10;
        margin-left: 0;
        transition-duration: 0s;
        gap: 0;
        padding: 16px
    }

    .header-menu .item.parent.active:active:has(.submenu:not(:hover))::before {
        background: var(--primary-opacity-012, rgba(208, 188, 255, 0.12))
    }

    .header-menu .item.parent.active > :is(a,span) {
        position: relative;
        align-items: center;
        justify-content: center;
        min-height: 40px;
        font-size: 1.125rem;
        line-height: 1.5rem;
        text-align: center;
        padding-left: 56px
    }

    .header-menu .item.parent.active > :is(a,span)::before {
        content: url('data:image/svg+xml,<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="m22.581 26.667 1.586-1.567-5.151-5.1 5.15-5.1-1.585-1.567L15.833 20z" fill="%23fff"/></svg>');
        display: block;
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        width: 40px;
        height: 40px
    }

    .header-menu .item.parent.active > svg {
        display: none
    }

    .header-menu .item.parent.active > .submenu {
        display: flex;
        overflow-y: auto;
        padding-top: 0;
        z-index: 0;
        flex: 1;
        margin-top: 16px
    }

    .header-menu .item.parent {
        gap: 8px
    }

    .header-menu .item.parent > a, .header-menu .item.parent > span {
        max-width: calc(100% - 36px)
    }

    .header-menu .item.current:not(.parent) a, .header-menu .item.current:not(.parent) > span {
        background: var(--states-hovered, rgba(255, 255, 255, 0.08))
    }

    .header-menu .submenu {
        position: relative;
        top: 0;
        left: 0;
        width: 100%;
        display: none
    }
}

@media (max-width: 575.9px) {
    .header-menu .item.parent.active {
        top: calc(var(--header-height) + 12px + 8px);
        max-height: calc(100vh - var(--header-height) - 12px - 12px - 8px)
    }
}

.section-hero {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 20px
}

.section-hero h1 {
    margin: 0
}

.section-hero .section-hero__content, .section-hero .section-hero__author {
    background: var(--surface-surface-bright, #4c3a2f)
}

.section-hero .section-hero__content {
    border-radius: 24px;
    padding: 0;
    display: grid;
    align-items: flex-start;
    grid-template-columns:1fr 1fr
}

.section-hero .section-hero__content-col {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 20px;
    padding: 24px
}

.section-hero .section-hero__content-col > * {
    margin: 0
}

.section-hero .section-hero__content-title {
    color: var(--on-surface-on-surface-light, #fff);
    font-size: 1.375rem;
    line-height: 2rem;
    font-weight: 700
}

@media (max-width: 575.9px) {
    .section-hero .section-hero__content-title {
        font-size: 1.125rem;
        line-height: 1.5rem
    }
}

.section-hero .section-hero__rating {
    color: var(--on-surface-on-surface, #f5f2ef);
    font-size: 1.375rem;
    line-height: 2rem;
    font-weight: 700
}

@media (max-width: 575.9px) {
    .section-hero .section-hero__rating {
        font-size: 1.125rem;
        line-height: 1.5rem
    }
}

.section-hero .section-hero__rating {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    --percent: calc(var(--rating, 4.5) / 5 * 100%)
}

.section-hero .section-hero__rating::before, .section-hero .section-hero__rating::after {
    content: "";
    font-size: 32px;
    line-height: 30px;
    height: 32px;
    letter-spacing: 0px;
    font-weight: 100
}

.section-hero .section-hero__rating::before {
    content: "★★★★★";
    display: block;
    background: linear-gradient(90deg, var(--star-color) var(--percent), var(--star-bg) var(--percent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: rgba(0, 0, 0, 0)
}

.section-hero .section-hero__rating::after {
    content: "☆☆☆☆☆";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: block;
    letter-spacing: 0px;
    color: var(--star-color)
}

@media (max-width: 575.9px) {
    .section-hero .section-hero__rating::before, .section-hero .section-hero__rating::after {
        font-size: 24px;
        line-height: 22px;
        height: 24px;
        letter-spacing: 0px
    }
}

@supports (mask: url(#)) {
    .section-hero .section-hero__rating::before, .section-hero .section-hero__rating::after {
        content: "";
        width: 160px;
        height: 32px;
        color: unset;
        -webkit-background-clip: unset;
        -webkit-text-fill-color: unset;
        background-clip: unset
    }

    .section-hero .section-hero__rating::before {
        background: linear-gradient(90deg, var(--star-color) var(--percent), var(--star-bg) var(--percent));
        -webkit-mask: url('data:image/svg+xml,<svg width="160" height="32" viewBox="0 0 160 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15.524 3.082a.5.5 0 0 1 .952 0l2.417 7.438a1.5 1.5 0 0 0 1.425 1.036h7.822a.5.5 0 0 1 .294.904l-6.328 4.597a1.5 1.5 0 0 0-.545 1.677l2.416 7.438a.5.5 0 0 1-.768.558l-6.327-4.596a1.5 1.5 0 0 0-1.764 0L8.791 26.73a.5.5 0 0 1-.769-.558l2.416-7.438a1.5 1.5 0 0 0-.544-1.677L3.566 12.46a.5.5 0 0 1 .294-.904h7.822a1.5 1.5 0 0 0 1.425-1.036zm32 0a.5.5 0 0 1 .952 0l2.417 7.438a1.5 1.5 0 0 0 1.425 1.036h7.822a.5.5 0 0 1 .294.904l-6.328 4.597a1.5 1.5 0 0 0-.544 1.677l2.416 7.438a.5.5 0 0 1-.769.558l-6.327-4.596a1.5 1.5 0 0 0-1.764 0l-6.327 4.596a.5.5 0 0 1-.768-.558l2.415-7.438a1.5 1.5 0 0 0-.544-1.677l-6.328-4.597a.5.5 0 0 1 .294-.904h7.822a1.5 1.5 0 0 0 1.425-1.036zm32 0a.5.5 0 0 1 .952 0l2.417 7.438a1.5 1.5 0 0 0 1.425 1.036h7.822a.5.5 0 0 1 .294.904l-6.328 4.597a1.5 1.5 0 0 0-.544 1.677l2.416 7.438a.5.5 0 0 1-.769.558l-6.327-4.596a1.5 1.5 0 0 0-1.764 0l-6.327 4.596a.5.5 0 0 1-.769-.558l2.416-7.438a1.5 1.5 0 0 0-.544-1.677l-6.328-4.597a.5.5 0 0 1 .294-.904h7.822a1.5 1.5 0 0 0 1.425-1.036zm32 0a.5.5 0 0 1 .952 0l2.417 7.438a1.5 1.5 0 0 0 1.425 1.036h7.822a.5.5 0 0 1 .294.904l-6.328 4.597a1.5 1.5 0 0 0-.544 1.677l2.416 7.438a.5.5 0 0 1-.769.558l-6.327-4.596a1.5 1.5 0 0 0-1.764 0l-6.327 4.596a.5.5 0 0 1-.769-.558l2.416-7.438a1.5 1.5 0 0 0-.544-1.677l-6.328-4.597a.5.5 0 0 1 .294-.904h7.822c.649 0 1.225-.419 1.425-1.036zm32 0a.5.5 0 0 1 .952 0l2.417 7.438a1.5 1.5 0 0 0 1.425 1.036h7.822a.5.5 0 0 1 .294.904l-6.328 4.597a1.5 1.5 0 0 0-.544 1.677l2.416 7.438a.5.5 0 0 1-.769.558l-6.327-4.596a1.5 1.5 0 0 0-1.764 0l-6.327 4.596a.5.5 0 0 1-.769-.558l2.416-7.438a1.5 1.5 0 0 0-.544-1.677l-6.328-4.597a.5.5 0 0 1 .294-.904h7.822c.649 0 1.225-.419 1.425-1.036z" fill="%23FF8F4A" stroke="%23FF8F4A"/></svg>');
        mask: url('data:image/svg+xml,<svg width="160" height="32" viewBox="0 0 160 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15.524 3.082a.5.5 0 0 1 .952 0l2.417 7.438a1.5 1.5 0 0 0 1.425 1.036h7.822a.5.5 0 0 1 .294.904l-6.328 4.597a1.5 1.5 0 0 0-.545 1.677l2.416 7.438a.5.5 0 0 1-.768.558l-6.327-4.596a1.5 1.5 0 0 0-1.764 0L8.791 26.73a.5.5 0 0 1-.769-.558l2.416-7.438a1.5 1.5 0 0 0-.544-1.677L3.566 12.46a.5.5 0 0 1 .294-.904h7.822a1.5 1.5 0 0 0 1.425-1.036zm32 0a.5.5 0 0 1 .952 0l2.417 7.438a1.5 1.5 0 0 0 1.425 1.036h7.822a.5.5 0 0 1 .294.904l-6.328 4.597a1.5 1.5 0 0 0-.544 1.677l2.416 7.438a.5.5 0 0 1-.769.558l-6.327-4.596a1.5 1.5 0 0 0-1.764 0l-6.327 4.596a.5.5 0 0 1-.768-.558l2.415-7.438a1.5 1.5 0 0 0-.544-1.677l-6.328-4.597a.5.5 0 0 1 .294-.904h7.822a1.5 1.5 0 0 0 1.425-1.036zm32 0a.5.5 0 0 1 .952 0l2.417 7.438a1.5 1.5 0 0 0 1.425 1.036h7.822a.5.5 0 0 1 .294.904l-6.328 4.597a1.5 1.5 0 0 0-.544 1.677l2.416 7.438a.5.5 0 0 1-.769.558l-6.327-4.596a1.5 1.5 0 0 0-1.764 0l-6.327 4.596a.5.5 0 0 1-.769-.558l2.416-7.438a1.5 1.5 0 0 0-.544-1.677l-6.328-4.597a.5.5 0 0 1 .294-.904h7.822a1.5 1.5 0 0 0 1.425-1.036zm32 0a.5.5 0 0 1 .952 0l2.417 7.438a1.5 1.5 0 0 0 1.425 1.036h7.822a.5.5 0 0 1 .294.904l-6.328 4.597a1.5 1.5 0 0 0-.544 1.677l2.416 7.438a.5.5 0 0 1-.769.558l-6.327-4.596a1.5 1.5 0 0 0-1.764 0l-6.327 4.596a.5.5 0 0 1-.769-.558l2.416-7.438a1.5 1.5 0 0 0-.544-1.677l-6.328-4.597a.5.5 0 0 1 .294-.904h7.822c.649 0 1.225-.419 1.425-1.036zm32 0a.5.5 0 0 1 .952 0l2.417 7.438a1.5 1.5 0 0 0 1.425 1.036h7.822a.5.5 0 0 1 .294.904l-6.328 4.597a1.5 1.5 0 0 0-.544 1.677l2.416 7.438a.5.5 0 0 1-.769.558l-6.327-4.596a1.5 1.5 0 0 0-1.764 0l-6.327 4.596a.5.5 0 0 1-.769-.558l2.416-7.438a1.5 1.5 0 0 0-.544-1.677l-6.328-4.597a.5.5 0 0 1 .294-.904h7.822c.649 0 1.225-.419 1.425-1.036z" fill="%23FF8F4A" stroke="%23FF8F4A"/></svg>');
        -webkit-mask-size: contain;
        mask-size: contain
    }

    .section-hero .section-hero__rating::after {
        background: var(--star-color);
        -webkit-mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="160" height="32" viewBox="0 0 160 32" fill="none"><path d="M15.524 3.082a.5.5 0 0 1 .952 0l2.417 7.438a1.5 1.5 0 0 0 1.425 1.036h7.822a.5.5 0 0 1 .294.904l-6.328 4.597a1.5 1.5 0 0 0-.545 1.677l2.416 7.438a.5.5 0 0 1-.768.558l-6.327-4.596a1.5 1.5 0 0 0-1.764 0L8.791 26.73a.5.5 0 0 1-.769-.558l2.416-7.438a1.5 1.5 0 0 0-.544-1.677L3.566 12.46a.5.5 0 0 1 .294-.904h7.822a1.5 1.5 0 0 0 1.425-1.036zm32 0a.5.5 0 0 1 .952 0l2.417 7.438a1.5 1.5 0 0 0 1.425 1.036h7.822a.5.5 0 0 1 .294.904l-6.328 4.597a1.5 1.5 0 0 0-.545 1.677l2.416 7.438a.5.5 0 0 1-.768.558l-6.327-4.596a1.5 1.5 0 0 0-1.764 0l-6.327 4.596a.5.5 0 0 1-.769-.558l2.416-7.438a1.5 1.5 0 0 0-.544-1.677l-6.328-4.597a.5.5 0 0 1 .294-.904h7.822a1.5 1.5 0 0 0 1.425-1.036zm32 0a.5.5 0 0 1 .952 0l2.417 7.438a1.5 1.5 0 0 0 1.425 1.036h7.822a.5.5 0 0 1 .294.904l-6.328 4.597a1.5 1.5 0 0 0-.545 1.677l2.416 7.438a.5.5 0 0 1-.768.558l-6.327-4.596a1.5 1.5 0 0 0-1.764 0l-6.327 4.596a.5.5 0 0 1-.769-.558l2.416-7.438a1.5 1.5 0 0 0-.544-1.677l-6.328-4.597a.5.5 0 0 1 .294-.904h7.822a1.5 1.5 0 0 0 1.425-1.036zm32 0a.5.5 0 0 1 .952 0l2.417 7.438a1.5 1.5 0 0 0 1.425 1.036h7.822a.5.5 0 0 1 .294.904l-6.328 4.597a1.5 1.5 0 0 0-.545 1.677l2.416 7.438a.5.5 0 0 1-.768.558l-6.327-4.596a1.5 1.5 0 0 0-1.764 0l-6.327 4.596a.5.5 0 0 1-.769-.558l2.416-7.438a1.5 1.5 0 0 0-.544-1.677l-6.328-4.597a.5.5 0 0 1 .294-.904h7.822a1.5 1.5 0 0 0 1.425-1.036zm32 0a.5.5 0 0 1 .952 0l2.417 7.438a1.5 1.5 0 0 0 1.425 1.036h7.822a.5.5 0 0 1 .294.904l-6.328 4.597a1.5 1.5 0 0 0-.545 1.677l2.416 7.438a.5.5 0 0 1-.768.558l-6.327-4.596a1.5 1.5 0 0 0-1.764 0l-6.327 4.596a.5.5 0 0 1-.769-.558l2.416-7.438a1.5 1.5 0 0 0-.544-1.677l-6.328-4.597a.5.5 0 0 1 .294-.904h7.822a1.5 1.5 0 0 0 1.425-1.036z" stroke="%23FF8F4A"/></svg>');
        mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="160" height="32" viewBox="0 0 160 32" fill="none"><path d="M15.524 3.082a.5.5 0 0 1 .952 0l2.417 7.438a1.5 1.5 0 0 0 1.425 1.036h7.822a.5.5 0 0 1 .294.904l-6.328 4.597a1.5 1.5 0 0 0-.545 1.677l2.416 7.438a.5.5 0 0 1-.768.558l-6.327-4.596a1.5 1.5 0 0 0-1.764 0L8.791 26.73a.5.5 0 0 1-.769-.558l2.416-7.438a1.5 1.5 0 0 0-.544-1.677L3.566 12.46a.5.5 0 0 1 .294-.904h7.822a1.5 1.5 0 0 0 1.425-1.036zm32 0a.5.5 0 0 1 .952 0l2.417 7.438a1.5 1.5 0 0 0 1.425 1.036h7.822a.5.5 0 0 1 .294.904l-6.328 4.597a1.5 1.5 0 0 0-.545 1.677l2.416 7.438a.5.5 0 0 1-.768.558l-6.327-4.596a1.5 1.5 0 0 0-1.764 0l-6.327 4.596a.5.5 0 0 1-.769-.558l2.416-7.438a1.5 1.5 0 0 0-.544-1.677l-6.328-4.597a.5.5 0 0 1 .294-.904h7.822a1.5 1.5 0 0 0 1.425-1.036zm32 0a.5.5 0 0 1 .952 0l2.417 7.438a1.5 1.5 0 0 0 1.425 1.036h7.822a.5.5 0 0 1 .294.904l-6.328 4.597a1.5 1.5 0 0 0-.545 1.677l2.416 7.438a.5.5 0 0 1-.768.558l-6.327-4.596a1.5 1.5 0 0 0-1.764 0l-6.327 4.596a.5.5 0 0 1-.769-.558l2.416-7.438a1.5 1.5 0 0 0-.544-1.677l-6.328-4.597a.5.5 0 0 1 .294-.904h7.822a1.5 1.5 0 0 0 1.425-1.036zm32 0a.5.5 0 0 1 .952 0l2.417 7.438a1.5 1.5 0 0 0 1.425 1.036h7.822a.5.5 0 0 1 .294.904l-6.328 4.597a1.5 1.5 0 0 0-.545 1.677l2.416 7.438a.5.5 0 0 1-.768.558l-6.327-4.596a1.5 1.5 0 0 0-1.764 0l-6.327 4.596a.5.5 0 0 1-.769-.558l2.416-7.438a1.5 1.5 0 0 0-.544-1.677l-6.328-4.597a.5.5 0 0 1 .294-.904h7.822a1.5 1.5 0 0 0 1.425-1.036zm32 0a.5.5 0 0 1 .952 0l2.417 7.438a1.5 1.5 0 0 0 1.425 1.036h7.822a.5.5 0 0 1 .294.904l-6.328 4.597a1.5 1.5 0 0 0-.545 1.677l2.416 7.438a.5.5 0 0 1-.768.558l-6.327-4.596a1.5 1.5 0 0 0-1.764 0l-6.327 4.596a.5.5 0 0 1-.769-.558l2.416-7.438a1.5 1.5 0 0 0-.544-1.677l-6.328-4.597a.5.5 0 0 1 .294-.904h7.822a1.5 1.5 0 0 0 1.425-1.036z" stroke="%23FF8F4A"/></svg>');
        -webkit-mask-size: contain;
        mask-size: contain
    }
}

@media (max-width: 575.9px) {
    .section-hero .section-hero__rating::before, .section-hero .section-hero__rating::after {
        content: "";
        font-size: 24px;
        line-height: 22px;
        height: 24px
    }

    @supports (mask: url(#)) {
        .section-hero .section-hero__rating::before, .section-hero .section-hero__rating::after {
            width: 120px;
            height: 24px
        }
    }
}

.section-hero .section-hero__demo {
    align-self: stretch;
    width: 100%;
    position: relative;
    min-height: 368px;
    border-radius: 0 24px 24px 0;
    border: 12px solid var(--surface-surface-bright, #4c3a2f);
    background: url(<path-to-image>) #d3d3d3 50%/cover no-repeat;
    overflow: hidden;
    background-size: cover;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: stretch
}

.section-hero .section-hero__demo-btns {
    width: 100%;
    padding: 8px 26px;
    background: var(--surface-container-surface-container-transparent, rgba(60, 47, 40, 0.76));
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: flex-start;
    gap: 24px;
    flex-wrap: wrap
}

.section-hero .section-hero__demo-btns .btn {
    flex: 1
}

.section-hero .section-hero__author {
    border-radius: 16px;
    padding: 16px 24px
}

@media (max-width: 991.9px) {
    .section-hero .section-hero__content {
        grid-template-columns:1fr
    }

    .section-hero .section-hero__demo {
        order: -1;
        border-radius: 24px 24px 0 0
    }
}

@media (max-width: 575.9px) {
    .section-hero {
        margin-top: 24px;
        gap: 16px
    }

    .section-hero .section-hero__content-col {
        padding: 16px;
        gap: 16px
    }

    .section-hero .section-hero__demo {
        min-height: 325px;
        border-width: 10px
    }

    .section-hero .section-hero__demo-btns {
        padding: 8px 16px;
        flex-direction: column;
        gap: 8px
    }

    .section-hero .section-hero__demo-btns .btn {
        width: 100%
    }

    .section-hero .section-hero__author {
        padding: 16px
    }
}

.modal {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: rgba(0, 0, 0, .6);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center
}

.modal.active {
    z-index: 9999;
    overflow: hidden;
    touch-action: none
}

.modal:not(.active) {
    display: none
}

.modal__content {
    position: relative;
    margin: auto var(--offsets, 20px);
    padding: 12px 16px 0;
    width: 100%;
    max-width: calc(var(--width-container));
    max-height: calc(100vh - var(--offsets, 20px));
    border-radius: 16px;
    background: var(--surface-surface-dim, #221a16);
    overflow: hidden;
    display: grid;
    grid-template-columns:1fr auto;
    grid-template-rows:auto auto 1fr;
    gap: 12px 16px
}

.modal__content > * {
    grid-column: 1/-1
}

.modal__content .modal__title {
    grid-column: 1/2
}

.modal__content .modal__close {
    grid-column: 2/3
}

.modal__content .btn {
    margin-inline: auto;
    margin-top: -4px;
    min-width: 200px
}

@media (max-width: 575.9px) {
    .modal__content {
        height: 100%;
        width: 100%;
        max-height: 100%;
        max-width: 100%;
        margin: 0;
        border-radius: 0
    }

    .modal__content .btn {
        min-width: unset;
        width: 100%
    }
}

.modal__body {
    grid-column: 1/-1;
    position: relative;
    aspect-ratio: 16/9;
    margin-left: -16px;
    width: calc(100% + 32px);
    max-width: calc(100% + 32px);
    max-height: 100%;
    padding: 16px;
    background: var(--surface-surface, #2f2320);
    overflow-y: auto
}

@supports not selector(::-webkit-scrollbar) {
    .modal__body {
        scrollbar-width: thin;
        scrollbar-color: var(--primary-opacity-012, rgba(208, 188, 255, 0.12)) rgba(0, 0, 0, 0)
    }
}

.modal__body::-webkit-scrollbar {
    width: 4px
}

.modal__body::-webkit-scrollbar-thumb {
    border-radius: 5px;
    background: var(--primary-opacity-012, rgba(208, 188, 255, 0.12));
    border-radius: 9px;
    border: 4px solid rgba(0, 0, 0, 0)
}

.modal__body::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0);
    border-radius: 9px
}

@media (max-width: 575.9px) {
    .modal__body {
        aspect-ratio: unset
    }
}

.modal__body:before {
    content: "Loading...";
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    position: absolute;
    inset: 0;
    color: var(--on-surface-on-surface-light, #fff);
    animation: loading 1s linear infinite alternate;
    z-index: 1
}

@keyframes loading {
    to {
        opacity: 0
    }
}

.modal iframe {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    position: relative;
    z-index: 2;
    display: block;
    border-radius: 16px
}

.modal__title {
    align-self: center;
    color: var(--on-surface-on-surface-light, #fff);
    margin-right: auto;
    font-size: 1.375rem;
    line-height: 2rem;
    font-weight: 700
}

@media (max-width: 575.9px) {
    .modal__title {
        font-size: 1.125rem;
        line-height: 1.5rem
    }
}

.modal__close {
    align-self: center;
    position: relative;
    background: rgba(0, 0, 0, 0);
    border: 0;
    margin: 2px;
    width: 36px;
    height: 36px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    border-radius: var(--border-radius-radius-medium, 12px);
    background: var(--surface-container-surface-container, rgba(246, 246, 246, 0.13))
}

.modal__close::after {
    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M15.124 3.46a1 1 0 1 1 1.414 1.414l-5.125 5.125 5.126 5.126a1 1 0 0 1-1.414 1.414l-5.126-5.126-5.126 5.126a1 1 0 0 1-1.414-1.414l5.126-5.126L3.46 4.874A1 1 0 1 1 4.874 3.46l5.125 5.125z" fill="%23fff"/></svg>');
    width: 20px;
    height: 20px;
    display: block
}

.modal__close::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: var(--border-radius-radius-medium, 12px);
    background: rgba(0, 0, 0, 0);
    transition-property: background;
    transition-duration: .3s;
    transition-timing-function: ease-in-out;
    transition-delay: 0s
}

@media (any-hover: hover) {
    .modal__close:hover::before {
        background: var(--states-hovered, rgba(255, 255, 255, 0.08))
    }
}

.modal__close:active::before {
    background: var(--states-focused, rgba(255, 255, 255, 0.12))
}

@media (any-hover: hover) {
    .modal__close:focus::before {
        background: var(--states-focused, rgba(255, 255, 255, 0.12))
    }
}

.btn {
    position: relative;
    z-index: 1;
    cursor: pointer;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: max-content;
    max-width: 100%;
    padding: 12px 24px;
    border-radius: var(--border-radius-radius-normal, 16px);
    background: rgba(0, 0, 0, 0);
    flex-shrink: 0;
    color: var(--primary-on-primary, #1a1410);
    text-align: center;
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 700;
    transition-property: background, box-shadow, color, border-color;
    transition-duration: .3s;
    transition-timing-function: ease-in-out;
    transition-delay: 0s
}

.btn svg {
    display: flex;
    min-width: 18px;
    min-height: 18px;
/*     max-width: 24px; */
/*     max-height: 24px; */
    vertical-align: middle
}

.btn svg path {
    fill: currentColor
}

.btn[disabled], .btn.disabled {
    pointer-events: none
}

.btn--l {
    padding: 16px 32px
}

@media (min-width: 576px) {
    .btn--l svg {
        max-width: 32px;
        max-height: 32px
    }
}

.btn--s {
    padding: 8px 16px
}

.btn--primary {
    color: var(--primary-on-primary, #1a1410);
    background: var(--primary-primary, #ffa534);
    box-shadow: 3px 3px 0 0 #926123
}

@media (any-hover: hover) {
    .btn--primary:hover {
        background: var(--primary-primary-hover, #ffae49);
        box-shadow: 4px 4px 0 0 #926123
    }
}

.btn--primary:active {
    background: var(--primary-primary-focus, #ffb860);
    box-shadow: 4px 4px 0 0 #926123
}

@media (any-hover: hover) {
    .btn--primary:focus {
        background: var(--primary-primary-focus, #ffb860);
        box-shadow: 4px 4px 0 0 #926123
    }
}

.btn--primary[disabled], .btn--primary.disabled {
    background: var(--primary-primary-disabled, #805e38);
    box-shadow: none
}

.btn--secondary {
    color: var(--secondary-on-secondary, #fff);
    background: var(--secondary-secondary, #c0392b);
    box-shadow: 3px 3px 0 0 #7a3b34
}

@media (any-hover: hover) {
    .btn--secondary:hover {
        background: var(--secondary-secondary-hover, #cc4436);
        box-shadow: 4px 4px 0 0 #7a3b34
    }
}

.btn--secondary:active {
    background: var(--secondary-secondary-focus, #d74e40);
    box-shadow: 4px 4px 0 0 #7a3b34
}

@media (any-hover: hover) {
    .btn--secondary:focus {
        background: var(--secondary-secondary-focus, #d74e40);
        box-shadow: 4px 4px 0 0 #7a3b34
    }
}

.btn--secondary[disabled], .btn--secondary.disabled {
    color: var(--secondary-on-secondary-disabled, #c58179);
    background: var(--secondary-secondary-disabled, #7a3b34)
}

.btn--tertiary {
    border-radius: var(--border-radius-radius-normal, 16px);
    background: var(--tertiary-tertiary, #ffd700);
    box-shadow: 3px 3px 0 0 #8f7a28
}

@media (any-hover: hover) {
    .btn--tertiary:hover {
        background: var(--tertiary-tertiary-hover, #ffde2d);
        box-shadow: 4px 4px 0 0 #8f7a28
    }
}

.btn--tertiary:active {
    background: var(--tertiary-tertiary-focus, #ffe452);
    box-shadow: 4px 4px 0 0 #8f7a28
}

@media (any-hover: hover) {
    .btn--tertiary:focus {
        background: var(--tertiary-tertiary-focus, #ffe452);
        box-shadow: 4px 4px 0 0 #8f7a28
    }
}

.btn--tertiary[disabled], .btn--tertiary.disabled {
    background: var(--tertiary-tertiary-disabled, #9c8844)
}

.btn--elevated {
    color: var(--on-surface-on-surface-light, #fff);
    background: var(--surface-surface-dim, #221a16);
    box-shadow: 3px 3px 0 0 #191513
}

.btn--elevated::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    transition-property: background;
    transition-duration: .3s;
    transition-timing-function: ease-in-out;
    transition-delay: 0s
}

.btn--elevated > * {
    position: relative;
    z-index: 1
}

@media (any-hover: hover) {
    .btn--elevated:hover {
        box-shadow: 4px 4px 0 0 #191513
    }

    .btn--elevated:hover::after {
        background: var(--states-hovered, rgba(255, 255, 255, 0.08))
    }
}

.btn--elevated:active {
    box-shadow: 4px 4px 0 0 #191513
}

.btn--elevated:active::after {
    background: var(--states-focused, rgba(255, 255, 255, 0.12))
}

@media (any-hover: hover) {
    .btn--elevated:focus {
        box-shadow: 4px 4px 0 0 #191513
    }

    .btn--elevated:focus::after {
        background: var(--states-focused, rgba(255, 255, 255, 0.12))
    }
}

.btn--elevated[disabled], .btn--elevated.disabled {
    color: var(--surface-container-on-surface-container-disabled, #8e7d75)
}

.btn--elevated[disabled]::after, .btn--elevated.disabled::after {
    background: var(--surface-container-surface-container-disabled, #2c2622)
}

.btn--outlined {
    color: var(--on-surface-on-surface-dark, #d8c3b4);
    overflow: visible
}

.btn--outlined::before, .btn--outlined::after {
    content: "";
    position: absolute;
    pointer-events: none;
    border-radius: var(--border-radius-radius-normal, 16px);
    background: var(--surface-surface, #2f2320);
    border: 1px solid var(--outline-outline-light, #8c6a58)
}

.btn--outlined::before {
    bottom: -3px;
    right: -3px;
    width: calc(100% + 1px);
    height: calc(100% + 1px);
    z-index: -2;
    border: 1px solid #7e5c49;
    background: var(--surface-surface, #2f2320)
}

.btn--outlined::after {
    inset: 0;
    z-index: -1;
    transition-property: background, box-shadow;
    transition-duration: .3s;
    transition-timing-function: ease-in-out;
    transition-delay: 0s
}

@media (any-hover: hover) {
    .btn--outlined:hover::after {
        box-shadow: 4px 4px 0 0 #7e5c49;
        background: #332c28
    }
}

.btn--outlined:active::after {
    background: #3d3632;
    box-shadow: 4px 4px 0 0 #7e5c49
}

@media (any-hover: hover) {
    .btn--outlined:focus::after {
        background: #3d3632;
        box-shadow: 4px 4px 0 0 #7e5c49
    }
}

.btn--outlined[disabled], .btn--outlined.disabled {
    color: var(--surface-container-on-surface-container-disabled, #8e7d75);
    border: 1px solid var(--outline-outline-light, #8c6a58)
}

.btn--outlined[disabled]::after, .btn--outlined[disabled]::before, .btn--outlined.disabled::after, .btn--outlined.disabled::before {
    display: none
}

.btn--link {
    padding: 0;
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 400
}

@media (max-width: 575.9px) {
    .btn--link {
        font-size: 0.9375rem
    }
}

.btn--link:active {
    text-decoration: underline;
    text-underline-offset: 4px
}

@media (any-hover: hover) {
    .btn--link:hover {
        text-decoration: underline;
        text-underline-offset: 4px
    }

    .btn--link:focus {
        text-decoration: underline;
        text-underline-offset: 4px
    }
}

.btn--link[disabled], .btn--link.disabled {
    color: var(--surface-container-on-surface-container-disabled, #8e7d75);
    text-decoration: none
}

.btn--text {
    color: var(--on-surface-on-surface-light, #fff);
    background: rgba(0, 0, 0, 0)
}

@media (any-hover: hover) {
    .btn--text:hover {
        background: var(--states-hovered, rgba(255, 255, 255, 0.08))
    }
}

.btn--text:active {
    background: var(--states-focused, rgba(255, 255, 255, 0.12))
}

@media (any-hover: hover) {
    .btn--text:focus {
        background: var(--states-focused, rgba(255, 255, 255, 0.12))
    }
}

.btn--text[disabled], .btn--text.disabled {
    color: var(--surface-container-on-surface-container-disabled, #8e7d75)
}

.btn.btn--link.btn--s {
    font-size: 0.9375rem
}

@media (max-width: 575.9px) {
    .btn--l {
        padding: 12px 24px
    }
}

.pros-cons {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 24px;
    margin-top: 24px
}

.pros-cons:first-child {
    margin-top: 0
}

.pros-cons__item {
    flex: 1;
    border-radius: 16px;
    background: var(--surface-surface-bright, #4c3a2f);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start
}

.pros-cons__item--cons .pros-cons__title {
    color: var(--states-error, #ce4031)
}

.pros-cons__item--cons .pros-cons__list li::before {
    content: 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="M18.673 11.995H5.34" stroke="%23CE4031" stroke-width="2"/></svg>')
}

.pros-cons__title {
    padding: 20px;
    background: var(--surface-surface-dim, #221a16);
    color: var(--states-success, #65d290);
    font-size: 1.5rem;
    line-height: 2rem;
    font-weight: 700
}

@media (max-width: 575.9px) {
    .pros-cons__title {
        font-size: 1.25rem;
        line-height: 1.75rem
    }
}

.pros-cons__list {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 16px;
    padding: 16px 20px 20px
}

.pros-cons__list li {
    position: relative;
    padding-left: 28px;
    font-weight: 600
}

.pros-cons__list li::before {
    content: 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.002 5.334v13.333m6.671-6.672H5.34" stroke="%2365D290" stroke-width="2"/></svg>');
    width: 24px;
    height: 24px;
    display: block;
    position: absolute;
    left: 0;
    top: 0
}

@media (max-width: 991.9px) {
    .pros-cons {
        flex-direction: column;
        align-items: stretch
    }
}

@media (max-width: 575.9px) {
    .pros-cons {
        margin-top: 20px;
        gap: 16px
    }

    .pros-cons__title {
        padding: 16px;
        font-size: 1.125rem;
        line-height: 1.5rem
    }

    .pros-cons__list {
        padding: 16px
    }
}

.scrolling .table td, .scrolling .table th {
    pointer-events: none;
    user-select: none
}

..wp-block-table {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    margin-top: 24px
}

..wp-block-table::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none
}

..wp-block-table:first-child {
    margin-top: 0
}

..wp-block-table table {
    table-layout: auto;
    min-width: 700px
}

..wp-block-table table td:last-child {
    text-align: unset
}

@media (max-width: 575.9px) {
    ..wp-block-table {
        margin-top: 20px
    }
}

table:not([class]), .wp-block-table {
    table-layout: fixed;
    border-spacing: 0;
    overflow-x: scroll;
    overflow-y: hidden;
    margin-top: 24px;
    border-radius: 16px;
    background: var(--surface-surface-bright, #4c3a2f);
    color: var(--on-surface-on-surface-light, #fff);
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 400
}

@media (max-width: 575.9px) {
    table:not([class]), .wp-block-table {
        font-size: 0.9375rem
    }
}

table:not([class]):first-child, .wp-block-table:first-child {
    margin-top: 0
}

table:not([class]) th, .wp-block-table th {
    padding-block: 20px;
    padding-inline: 32px;
    height: 64px;
    background: var(--surface-surface-dim, #221a16);
    color: var(--on-surface-on-surface-light, #fff);
    text-align: left;
    white-space: nowrap;
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 700
}

table:not([class]) th:first-child, .wp-block-table th:first-child {
    padding-left: 32px
}

table:not([class]) th:last-child, .wp-block-table th:last-child {
    padding-right: 32px
}

table:not([class]) th:not(:first-child), .wp-block-table th:not(:first-child) {
    padding-left: 16px
}

table:not([class]) th:not(:last-child), .wp-block-table th:not(:last-child) {
    padding-right: 16px
}

table:not([class]) td, .wp-block-table td {
    position: relative;
    padding-block: 16px;
    padding-inline: 32px
}

table:not([class]) td:first-child, .wp-block-table td:first-child {
    padding-left: 32px
}

table:not([class]) td:last-child, .wp-block-table td:last-child {
    padding-right: 32px
}

table:not([class]) td:not(:first-child), .wp-block-table td:not(:first-child) {
    padding-left: 16px
}

table:not([class]) td:not(:last-child), .wp-block-table td:not(:last-child) {
    padding-right: 16px
}

table:not([class]) td::after, .wp-block-table td::after {
    content: "";
    top: 100%;
    left: 0;
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 1px;
    background-color: var(--outline-outline, #6c4e3c)
}

table:not([class]) td:first-child::after, .wp-block-table td:first-child::after {
    left: 32px
}

table:not([class]) td:last-child::after, .wp-block-table td:last-child::after {
    right: 32px;
    left: unset
}

table:not([class]) td:only-child::after, .wp-block-table td:only-child::after {
    left: 32px;
    width: calc(100% - 32px - 32px)
}

table:not([class]) tr:first-child td, .wp-block-table tr:first-child td {
    padding-top: 24px
}

table:not([class]) tr:last-child td, .wp-block-table tr:last-child td {
    padding-bottom: 24px
}

table:not([class]) .bold, .wp-block-table .bold {
    white-space: nowrap;
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 700
}

table:not([class]) tbody:first-child tr:first-child td, .wp-block-table tbody:first-child tr:first-child td {
    padding-top: 32px
}

table:not([class]) tbody:first-child tr:last-child td, .wp-block-table tbody:first-child tr:last-child td {
    padding-bottom: 32px
}

table:not([class]) tbody:first-child td:first-child, .wp-block-table tbody:first-child td:first-child {
    width: 1px;
    white-space: nowrap;
    background: var(--surface-surface-dim, #221a16);
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 700
}

table:not([class]) tbody:first-child td:first-child::after, .wp-block-table tbody:first-child td:first-child::after {
    width: calc(100% - 32px - 16px)
}

table:not([class]) tbody:first-child td:nth-of-type(2)::after, .wp-block-table tbody:first-child td:nth-of-type(2)::after {
    left: 16px
}

table:not([class]) tbody:first-child td:nth-of-type(2):last-child::after, .wp-block-table tbody:first-child td:nth-of-type(2):last-child::after {
    width: calc(100% - 16px - 32px)
}

table:not([class]) tbody:first-child td:only-child::after, .wp-block-table tbody:first-child td:only-child::after {
    left: 32px;
    width: calc(100% - 32px - 32px)
}

@media (max-width: 575.9px) {
    table:not([class]), .wp-block-table {
        margin-top: 20px
    }

    table:not([class]) th, .wp-block-table th {
        padding-block: 16px;
        padding-inline: 16px;
        height: 80px
    }

    table:not([class]) th:first-child, .wp-block-table th:first-child {
        padding-left: 16px
    }

    table:not([class]) th:last-child, .wp-block-table th:last-child {
        padding-right: 16px
    }

    table:not([class]) th:not(:first-child), .wp-block-table th:not(:first-child) {
        padding-left: 8px
    }

    table:not([class]) th:not(:last-child), .wp-block-table th:not(:last-child) {
        padding-right: 8px
    }

    table:not([class]) td, .wp-block-table td {
        padding-block: 16px;
        padding-inline: 16px
    }

    table:not([class]) td:first-child, .wp-block-table td:first-child {
        padding-left: 16px
    }

    table:not([class]) td:last-child, .wp-block-table td:last-child {
        padding-right: 16px
    }

    table:not([class]) td:not(:first-child), .wp-block-table td:not(:first-child) {
        padding-left: 8px
    }

    table:not([class]) td:not(:last-child), .wp-block-table td:not(:last-child) {
        padding-right: 8px
    }

    table:not([class]) td:first-child::after, .wp-block-table td:first-child::after {
        left: 16px
    }

    table:not([class]) td:last-child::after, .wp-block-table td:last-child::after {
        right: 16px
    }

    table:not([class]) td:only-child::after, .wp-block-table td:only-child::after {
        left: 16px;
        width: calc(100% - 16px - 16px)
    }

    table:not([class]) tr:first-child td, .wp-block-table tr:first-child td {
        padding-top: 16px
    }

    table:not([class]) tr:last-child td, .wp-block-table tr:last-child td {
        padding-bottom: 16px
    }

    table:not([class]) tbody:first-child tr:first-child td, .wp-block-table tbody:first-child tr:first-child td {
        padding-top: 16px
    }

    table:not([class]) tbody:first-child tr:last-child td, .wp-block-table tbody:first-child tr:last-child td {
        padding-bottom: 16px
    }

    table:not([class]) tbody:first-child td:first-child, .wp-block-table tbody:first-child td:first-child {
        padding: 16px
    }

    table:not([class]) tbody:first-child td:first-child::after, .wp-block-table tbody:first-child td:first-child::after {
        width: calc(100% - 16px - 16px)
    }

    table:not([class]) tbody:first-child td:nth-of-type(2), .wp-block-table tbody:first-child td:nth-of-type(2) {
        padding-left: 16px
    }

    table:not([class]) tbody:first-child td:nth-of-type(2)::after, .wp-block-table tbody:first-child td:nth-of-type(2)::after {
        left: 16px
    }

    table:not([class]) tbody:first-child td:nth-of-type(2):last-child::after, .wp-block-table tbody:first-child td:nth-of-type(2):last-child::after {
        width: calc(100% - 16px - 16px)
    }

    table:not([class]) tbody:first-child td:only-child::after, .wp-block-table tbody:first-child td:only-child::after {
        left: 16px;
        width: calc(100% - 16px - 16px)
    }
}

.toc-section {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 32px
}

.toc-section.active .toc-section__btn svg {
    transform: rotate(-180deg)
}

.toc-section__trigger {
    display: contents
}

.toc-section .toc-section__title {
    order: 0;
    color: var(--on-surface-on-surface, #f5f2ef);
    margin: 3px 0 0;
    font-size: 1.375rem;
    line-height: 2rem;
    font-weight: 700
}

@media (max-width: 575.9px) {
    .toc-section .toc-section__title {
        font-size: 1.125rem;
        line-height: 1.5rem
    }
}

.toc-section__list {
    order: 2;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 30px 0
}

.toc-section__item {
    position: relative;
    display: flex;
    flex-direction: row
}

.toc-section__item:not(:first-child) {
    padding-left: 20px
}

.toc-section__item:not(:first-child)::after {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 50%;
    left: 5px;
    width: 10px;
    height: 10px;
    background: var(--outline-outline, #6c4e3c)
}

.toc-section__link {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: var(--border-radius-radius-normal, 16px);
    overflow: hidden;
    color: var(--on-surface-on-surface-light, #fff);
    text-align: center;
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 700;
    white-space: nowrap;
    transition-property: background;
    transition-duration: .3s;
    transition-timing-function: ease-in-out;
    transition-delay: 0s
}

@media (any-hover: hover) {
    .toc-section__link:hover {
        background: var(--states-hovered, rgba(255, 255, 255, 0.08))
    }
}

.toc-section__link:active {
    background: var(--states-focused, rgba(255, 255, 255, 0.12))
}

@media (any-hover: hover) {
    .toc-section__link:focus {
        background: var(--states-focused, rgba(255, 255, 255, 0.12))
    }
}

.toc-section__btn {
    order: 3;
    min-width: 36px;
    width: 36px;
    height: 36px;
    margin: 2px 2px 2px auto;
    background: rgba(0, 0, 0, 0);
    border-radius: var(--border-radius-radius-medium, 12px);
    border: 1px solid var(--on-surface-on-surface-dark, #d8c3b4);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    transition-property: background;
    transition-duration: .3s;
    transition-timing-function: ease-in-out;
    transition-delay: 0s
}

.toc-section__btn svg {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    transition-property: transform;
    transition-duration: .3s;
    transition-timing-function: ease-in-out;
    transition-delay: 0s
}

@media (min-width: 992px) {
    .toc-section:not(.active) .toc-section__list {
        max-height: 40px;
        overflow: hidden
    }
}

@media (min-width: 992px)and (any-hover: hover) {
    .toc-section__btn:hover {
        background: var(--states-hovered, rgba(255, 255, 255, 0.08))
    }
}

@media (min-width: 992px) {
    .toc-section__btn:active {
        background: var(--states-focused, rgba(255, 255, 255, 0.12))
    }
}

@media (min-width: 992px)and (any-hover: hover) {
    .toc-section__btn:focus {
        background: var(--states-focused, rgba(255, 255, 255, 0.12))
    }
}

@media (max-width: 991.9px) {
    .toc-section {
        padding: 0;
        flex-direction: column;
        gap: 0
    }

    .toc-section:not(.active) .toc-section__nav {
        display: none
    }

    .toc-section__trigger {
        width: 100%;
        cursor: pointer;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        padding: 32px
    }
}

@media (max-width: 991.9px)and (any-hover: hover) {
    .toc-section__trigger:hover .toc-section__btn {
        background: var(--states-hovered, rgba(255, 255, 255, 0.08))
    }
}

@media (max-width: 991.9px) {
    .toc-section__trigger:active .toc-section__btn {
        background: var(--states-focused, rgba(255, 255, 255, 0.12))
    }
}

@media (max-width: 991.9px)and (any-hover: hover) {
    .toc-section__trigger:focus .toc-section__btn {
        background: var(--states-focused, rgba(255, 255, 255, 0.12))
    }
}

@media (max-width: 991.9px) {
    .toc-section__nav {
        margin-top: -12px;
        padding: 0 32px 32px
    }
}

@media (max-width: 575.9px) {
    .toc-section__trigger {
        padding: 18px 16px
    }

    .toc-section__nav {
        margin-top: 4px;
        padding: 0 16px 16px
    }

    .toc-section__btn {
        min-width: 32px;
        width: 32px;
        height: 32px
    }
}

.lang {
    cursor: pointer;
    position: relative;
    z-index: 60;
    border-radius: 12px;
    background: var(--surface-container-surface-container, rgba(246, 246, 246, 0.2));
    box-shadow: 3px 3px 0 0 #403631;
    padding: 10px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--on-surface-on-surface-light, #fff);
    transition-property: background;
    transition-duration: .3s;
    transition-timing-function: ease-in-out;
    transition-delay: 0s;
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 700
}

.lang > * {
    position: relative;
    z-index: 2
}

.lang::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0);
    border-radius: 12px;
    transition-property: background;
    transition-duration: .3s;
    transition-timing-function: ease-in-out;
    transition-delay: 0s
}

.lang:active::after {
    background: var(--states-hovered, rgba(255, 255, 255, 0.08))
}

@media (any-hover: hover) {
    .lang:hover::after {
        background: var(--states-hovered, rgba(255, 255, 255, 0.08))
    }

    .lang:focus::after {
        background: var(--states-hovered, rgba(255, 255, 255, 0.08))
    }
}

.lang img {
    width: 36px;
    height: 24px;
    min-width: 36px;
    object-fit: cover
}

.lang svg {
    min-width: 16px;
    transition-property: transform;
    transition-duration: .3s;
    transition-timing-function: ease-in-out;
    transition-delay: 0s
}

.lang.active {
    border-radius: 12px 12px 0 0
}

.lang.active::after {
    border-radius: 12px 12px 0 0;
    background: var(--surface-container-surface-container, rgba(246, 246, 246, 0.12))
}

.lang.active .lang__list {
    display: flex
}

.lang.active > svg {
    transform: rotate(-180deg)
}

.lang__list {
    position: absolute;
    z-index: 1;
    top: 100%;
    left: 0;
    width: 100%;
    max-height: 300px;
    box-shadow: 3px 3px 0 0 #403631;
    overflow-y: auto;
    overflow-x: hidden;
    border-radius: 0 0 12px 12px;
    background: var(--surface-container-surface-container, rgba(246, 246, 246, 0.13));
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    display: none
}

@supports not selector(::-webkit-scrollbar) {
    .lang__list {
        scrollbar-width: thin;
        scrollbar-color: var(--primary-opacity-012, rgba(208, 188, 255, 0.12)) rgba(0, 0, 0, 0)
    }
}

.lang__list::-webkit-scrollbar {
    width: 4px
}

.lang__list::-webkit-scrollbar-thumb {
    border-radius: 5px;
    background: var(--primary-opacity-012, rgba(208, 188, 255, 0.12));
    border-radius: 9px;
    border: 4px solid rgba(0, 0, 0, 0)
}

.lang__list::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0);
    border-radius: 9px
}

.lang__item {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #6c4e3c
}

.lang__link {
    width: 100%;
    padding: 10px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    transition-property: background, color;
    transition-duration: .3s;
    transition-timing-function: ease-in-out;
    transition-delay: 0s
}

@media (any-hover: hover) {
    .lang__link:hover {
        background: var(--states-hovered, rgba(255, 255, 255, 0.08))
    }
}

@media (any-hover: none)and (pointer: coarse) {
    .lang__link:active {
        background: var(--states-hovered, rgba(255, 255, 255, 0.08))
    }
}

.lang__link:active {
    background: var(--states-focused, rgba(255, 255, 255, 0.12))
}

@media (any-hover: hover) {
    .lang__link:focus {
        background: var(--states-focused, rgba(255, 255, 255, 0.12))
    }
}

@media (max-width: 575.9px) {
    .lang {
        padding: 12px
    }

    .lang span {
        display: none
    }

    .lang img {
        width: 26px;
        height: 18px;
        min-width: 26px
    }

    .lang__link {
        padding: 12px
    }
}

.author-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    flex-wrap: wrap;
    color: var(--on-surface-on-surface-dark, #d8c3b4);
    margin-top: 20px
}

.author-row:first-child {
    margin-top: 0
}

.author-row img {
    width: 24px;
    min-width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover
}

.author-row__name {
    color: var(--on-surface-on-surface, #f5f2ef)
}

.author-row__name span {
    color: var(--on-surface-on-surface-dark, #d8c3b4)
}

.author-row__time {
    margin-left: 4px;
    padding-left: 12px;
    border-left: 1px solid var(--outline-outline, #6c4e3c);
    color: var(--on-surface-on-surface-dark, #d8c3b4)
}

@media (max-width: 767.9px) {
    .author-row {
        padding-top: 9px
    }

    .author-row__time {
        width: 100%;
        margin: 25px 0 0;
        padding: 16px 0 0;
        border-top: 1px solid var(--outline-outline, #6c4e3c);
        border-left: none
    }
}

@media (max-width: 575.9px) {
    .author-row {
        gap: 4px 8px;
        margin-top: 16px
    }

    .author-row__name {
        width: 100%
    }

    .author-row img {
        width: 18px;
        min-width: 18px;
        height: 18px
    }
}

.gallery {
    margin-top: 24px;
    display: grid;
    grid-template-columns:repeat(auto-fit, minmax(230px, 1fr));
    align-items: flex-start;
    gap: 16px
}

.gallery:first-child {
    margin-top: 0
}

@media (max-width: 575.9px) {
    .gallery {
        margin-top: 20px;
        grid-template-columns:1fr
    }
}

.gallery img, .gallery video {
    border-radius: 7px;
    width: 100%;
    height: 100%;
    user-select: none;
    pointer-events: none;
    max-height: 500px;
    object-fit: cover
}

.gallery__item {
    max-width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center
}

.gallery__item--video .gallery__item-link::after {
    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="52" height="44" viewBox="0 0 52 44" fill="none"><rect x="1" y="1" width="50" height="42" rx="15" stroke="%23FFA534" stroke-width="2"/><path d="M21 17.148c0-.891 1.03-1.441 1.84-.983l8.57 4.852a1.115 1.115 0 0 1 0 1.966l-8.57 4.852c-.81.458-1.84-.092-1.84-.983z" fill="%23FFA534"/><path d="M21 17.148c0-.891 1.03-1.441 1.84-.983l8.57 4.852a1.115 1.115 0 0 1 0 1.966l-8.57 4.852c-.81.458-1.84-.092-1.84-.983z" stroke="%23FFA534"/></svg>');
    width: 52px;
    height: 44px;
    display: block;
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

.gallery__item--video .gallery__item-link::before {
    content: "";
    z-index: 0;
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .5)
}

.gallery__item-text {
    position: absolute;
    z-index: 1;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 12px;
    display: flex;
    flex-direction: row;
    align-items: center;
    color: var(--on-surface-on-surface, #ece8f2)
}

.gallery__item-link {
    height: 100%;
    width: 100%;
    position: relative;
    display: flex;
    overflow: hidden;
    border-radius: 12px
}

.info-table {
    position: relative;
    margin-top: 20px;
    overflow: hidden
}

.info-table:first-child {
    margin-top: 0
}

.info-table__tbody {
    width: 100%;
    display: grid;
    grid-template-columns:1fr 1fr;
    gap: 20px 20px
}

.info-table__row {
    position: relative;
    padding-top: 20px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 16px
}

.info-table__row::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: var(--outline-outline, #6c4e3c)
}

.info-table__cell {
    color: var(--on-surface-on-surface-dark, #d8c3b4)
}

.info-table__cell:first-child {
    font-weight: 600;
    color: var(--on-surface-on-surface, #f5f2ef)
}

.info-table__cell:last-child {
    text-align: right
}

@media (max-width: 575.9px) {
    .info-table {
        margin-top: 16px
    }

    .info-table__tbody {
        gap: 16px 16px
    }

    .info-table__row {
        padding-top: 16px;
        flex-direction: column;
        align-items: flex-start;
        gap: 4px
    }

    .info-table__row::before {
        width: calc(200% + 16px)
    }

    .info-table__cell:last-child {
        text-align: left
    }
}

.grid-block {
    max-width: 100%;
    display: grid;
    grid-template-columns:repeat(auto-fill, minmax(250px, 1fr));
    gap: 16px;
    margin-top: 16px
}

.grid-block:first-child {
    margin-top: 0
}

.grid-block.grid-block--3 {
    grid-template-columns:repeat(auto-fill, minmax(300px, 1fr))
}

.grid-block.grid-block--5 {
    grid-template-columns:repeat(auto-fill, minmax(220px, 1fr))
}

@media (max-width: 575.9px) {
    .grid-block {
        grid-template-columns:1fr
    }

    .grid-block.grid-block--3, .grid-block.grid-block--5 {
        grid-template-columns:1fr
    }
}

.slot-card {
    max-width: 100%;
    position: relative;
    padding: 12px;
    border-radius: 16px;
    background: var(--surface-surface-dim, #221a16);
    overflow: hidden;
    display: grid;
    grid-template-columns:1fr 1fr;
    gap: 16px
}

.slot-card > img {
    width: 100%;
    height: 100px;
    object-fit: cover;
    border-radius: 12px
}

.slot-card__info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 12px
}

.slot-card__name {
    color: var(--on-surface-on-surface-light, #fff);
    font-size: 1.375rem;
    line-height: 2rem;
    font-weight: 700
}

@media (max-width: 575.9px) {
    .slot-card__name {
        font-size: 1.125rem;
        line-height: 1.5rem
    }
}

.slot-card__provider {
    color: var(--on-surface-on-surface-dark, #d8c3b4);
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 400
}

.slot-card__btns {
    grid-column: 1/-1;
    padding-top: 16px;
    margin-top: auto;
    border-top: 1px solid var(--outline-outline, #6c4e3c);
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: flex-start;
    gap: 8px 16px;
    flex-wrap: wrap
}

.slot-card__btns .btn {
    padding: 12px;
    flex: 1
}

@media (max-width: 575.9px) {
    .slot-card {
        gap: 12px 16px
    }

    .slot-card > img {
        height: 84px
    }

    .slot-card__btns {
        padding-top: 12px
    }
}

.content-img {
    display: grid;
    grid-template-columns:1fr fit-content(50%);
    gap: 20px 24px;
    margin-top: 24px
}

.content-img:first-child {
    margin-top: 0
}

.content-img > *:only-child {
    grid-column: 1/-1
}

.content-img .btn:not(:first-child) {
    margin-top: 20px
}

.content-img__content {
    grid-column: span 1
}

.content-img img {
    width: 100%;
    grid-column: span 1;
    margin: 0
}

.content-img--reversed .content-img__content {
    order: 1
}

.content-img--reversed img {
    order: -1
}

@media (max-width: 991.9px) {
    .content-img {
        display: flex;
        flex-direction: column;
        align-items: stretch
    }

    .content-img > img {
        width: 100%
    }

    .content-img .btn {
        width: 100%
    }

    .content-img .btn:not(:first-child) {
        margin-top: 16px
    }
}

@media (max-width: 575.9px) {
    .content-img {
        margin-top: 20px
    }
}

.listing {
    margin-top: 24px
}

.listing:first-child {
    margin-top: 0
}

.listing__list {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 24px
}

.listing__row {
    width: 100%;
    display: flex
}

.listing__row:first-child .listing__item {
    border-color: var(--primary-primary, #ffa534)
}

.listing__item {
    width: 100%;
    padding: 22px;
    border-radius: 16px;
    border: 2px solid var(--surface-surface-dim, #221a16);
    background: var(--surface-surface-dim, #221a16);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 32px
}

.listing__item-info {
    display: grid;
    grid-template-columns:141px 1fr;
    gap: 16px
}

.listing__item-info > img, .listing__item-info > svg {
    grid-area: 1/1/3/2;
    width: 100%;
    height: 104px;
    object-fit: cover;
    border-radius: 16px
}

.listing__item-name {
    color: var(--on-surface-on-surface-light, #fff);
    font-size: 1.375rem;
    line-height: 2rem;
    font-weight: 700
}

@media (max-width: 575.9px) {
    .listing__item-name {
        font-size: 1.125rem;
        line-height: 1.5rem
    }
}

.listing__item-bonus {
    padding: 16px;
    border-radius: 16px;
    border: 1px solid var(--outline-outline, #6c4e3c);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    color: var(--on-surface-on-surface-light, #fff);
    text-align: center;
    font-size: 1.375rem;
    line-height: 2rem;
    font-weight: 700
}

@media (max-width: 575.9px) {
    .listing__item-bonus {
        font-size: 1.125rem;
        line-height: 1.5rem
    }
}

.listing__item-bonus-type {
    color: var(--on-surface-on-surface, #f5f2ef);
    text-align: center;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 400
}

@media (max-width: 575.9px) {
    .listing__item-bonus-type {
        font-size: 0.9375rem
    }
}

.listing__item-bonus-type::before {
    content: url('data:image/svg+xml,<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5.788 5c0 .29.04.594.142.892.101.294.29.649.63.935.24.202.518.336.813.404a141 141 0 0 0-2.48 1.495l1.578 2.55a163 163 0 0 1 3.995-2.378V20H5.5a1 1 0 0 1-1-1v-9h-1a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1zm7.752 3.336V20h-2.074V8.326l1.013-.574zM21.5 5a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1h-1v9a1 1 0 0 1-1 1h-4.96V8.887l4.408 2.428 1.447-2.628-2.616-1.44c.501-.087 1.037-.332 1.397-.887.31-.477.35-.98.318-1.36z" fill="%23F5F2EF"/><path fill-rule="evenodd" clip-rule="evenodd" d="M7.849 3.014c.227-.044.455-.004.667.101l.57.3c.657.351 1.757.95 3.035 1.647h.769a54 54 0 0 1 2.79-1.486c.393-.19.738-.34 1.006-.433.132-.044.267-.083.391-.1a1 1 0 0 1 .23 0 .6.6 0 0 1 .248.092l.09.074.119.128c.277.327.565.834.664 1.311.055.27.07.633-.131.944-.221.34-.6.47-1.005.47h-3.34c2.004 1.097 4.131 2.264 5.581 3.062l-.482.876c-1.69-.93-4.277-2.35-6.524-3.578a224 224 0 0 0-5.972 3.565l-.263-.425-.263-.425a247 247 0 0 1 3.73-2.26l1.387-.815H7.792a.96.96 0 0 1-.629-.223 1.1 1.1 0 0 1-.328-.496c-.117-.34-.107-.736-.031-1.076.075-.339.234-.71.502-.965.139-.133.32-.246.543-.288m.148 1.011c-.076.073-.167.234-.217.458-.049.222-.039.42 0 .534q.013.034.023.045h2.228c-.569-.309-1.05-.57-1.401-.757l-.562-.295c-.038-.02-.044-.012-.032-.014a.2.2 0 0 0-.039.03m9.013.065c-.21.072-.513.202-.896.386a35 35 0 0 0-1.144.586h2.322a.5.5 0 0 0 .167-.022.5.5 0 0 0-.01-.19c-.054-.257-.22-.566-.38-.78z" fill="%23F5F2EF"/></svg>');
    width: 24px;
    height: 24px
}

.listing__item-btns {
    max-width: 302px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 16px
}

.listing__item-btns .btn {
    width: 100%
}

.listing__item-player {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 16px;
    text-align: center;
    font-size: 0.875rem;
    line-height: 1.375rem
}

.listing__item-player img, .listing__item-player svg {
    max-width: 34px;
    max-height: 22px;
    object-fit: contain
}

.listing__item-info {
    flex: 1
}

.listing__item-bonus {
    flex: 1.38
}

.listing-name {
    color: var(--on-surface-on-surface-light, #fff);
    font-size: 1.375rem;
    line-height: 2rem;
    font-weight: 700
}

@media (max-width: 575.9px) {
    .listing-name {
        font-size: 1.125rem;
        line-height: 1.5rem
    }
}

.listing__rating {
    display: flex;
    flex-direction: column;
    gap: 8px;
    color: var(--on-surface-on-surface-dark, #d8c3b4)
}

.listing__rating-stars {
    font-size: 1.125rem;
    line-height: 1.5rem;
    font-weight: 600;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    --percent: calc(var(--rating, 4.5) / 5 * 100%)
}

.listing__rating-stars::before, .listing__rating-stars::after {
    content: "";
    font-size: 24px;
    line-height: 22px;
    height: 24px;
    letter-spacing: 0px;
    font-weight: 100
}

.listing__rating-stars::before {
    content: "★★★★★";
    display: block;
    background: linear-gradient(90deg, var(--star-color) var(--percent), var(--star-bg) var(--percent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: rgba(0, 0, 0, 0)
}

.listing__rating-stars::after {
    content: "☆☆☆☆☆";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: block;
    letter-spacing: 0px;
    color: var(--star-color)
}

@media (max-width: 575.9px) {
    .listing__rating-stars::before, .listing__rating-stars::after {
        font-size: 18px;
        line-height: 16px;
        height: 18px;
        letter-spacing: 0px
    }
}

@supports (mask: url(#)) {
    .listing__rating-stars::before, .listing__rating-stars::after {
        content: "";
        width: 120px;
        height: 24px;
        color: unset;
        -webkit-background-clip: unset;
        -webkit-text-fill-color: unset;
        background-clip: unset
    }

    .listing__rating-stars::before {
        background: linear-gradient(90deg, var(--star-color) var(--percent), var(--star-bg) var(--percent));
        -webkit-mask: url('data:image/svg+xml,<svg width="160" height="32" viewBox="0 0 160 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15.524 3.082a.5.5 0 0 1 .952 0l2.417 7.438a1.5 1.5 0 0 0 1.425 1.036h7.822a.5.5 0 0 1 .294.904l-6.328 4.597a1.5 1.5 0 0 0-.545 1.677l2.416 7.438a.5.5 0 0 1-.768.558l-6.327-4.596a1.5 1.5 0 0 0-1.764 0L8.791 26.73a.5.5 0 0 1-.769-.558l2.416-7.438a1.5 1.5 0 0 0-.544-1.677L3.566 12.46a.5.5 0 0 1 .294-.904h7.822a1.5 1.5 0 0 0 1.425-1.036zm32 0a.5.5 0 0 1 .952 0l2.417 7.438a1.5 1.5 0 0 0 1.425 1.036h7.822a.5.5 0 0 1 .294.904l-6.328 4.597a1.5 1.5 0 0 0-.544 1.677l2.416 7.438a.5.5 0 0 1-.769.558l-6.327-4.596a1.5 1.5 0 0 0-1.764 0l-6.327 4.596a.5.5 0 0 1-.768-.558l2.415-7.438a1.5 1.5 0 0 0-.544-1.677l-6.328-4.597a.5.5 0 0 1 .294-.904h7.822a1.5 1.5 0 0 0 1.425-1.036zm32 0a.5.5 0 0 1 .952 0l2.417 7.438a1.5 1.5 0 0 0 1.425 1.036h7.822a.5.5 0 0 1 .294.904l-6.328 4.597a1.5 1.5 0 0 0-.544 1.677l2.416 7.438a.5.5 0 0 1-.769.558l-6.327-4.596a1.5 1.5 0 0 0-1.764 0l-6.327 4.596a.5.5 0 0 1-.769-.558l2.416-7.438a1.5 1.5 0 0 0-.544-1.677l-6.328-4.597a.5.5 0 0 1 .294-.904h7.822a1.5 1.5 0 0 0 1.425-1.036zm32 0a.5.5 0 0 1 .952 0l2.417 7.438a1.5 1.5 0 0 0 1.425 1.036h7.822a.5.5 0 0 1 .294.904l-6.328 4.597a1.5 1.5 0 0 0-.544 1.677l2.416 7.438a.5.5 0 0 1-.769.558l-6.327-4.596a1.5 1.5 0 0 0-1.764 0l-6.327 4.596a.5.5 0 0 1-.769-.558l2.416-7.438a1.5 1.5 0 0 0-.544-1.677l-6.328-4.597a.5.5 0 0 1 .294-.904h7.822c.649 0 1.225-.419 1.425-1.036zm32 0a.5.5 0 0 1 .952 0l2.417 7.438a1.5 1.5 0 0 0 1.425 1.036h7.822a.5.5 0 0 1 .294.904l-6.328 4.597a1.5 1.5 0 0 0-.544 1.677l2.416 7.438a.5.5 0 0 1-.769.558l-6.327-4.596a1.5 1.5 0 0 0-1.764 0l-6.327 4.596a.5.5 0 0 1-.769-.558l2.416-7.438a1.5 1.5 0 0 0-.544-1.677l-6.328-4.597a.5.5 0 0 1 .294-.904h7.822c.649 0 1.225-.419 1.425-1.036z" fill="%23FF8F4A" stroke="%23FF8F4A"/></svg>');
        mask: url('data:image/svg+xml,<svg width="160" height="32" viewBox="0 0 160 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15.524 3.082a.5.5 0 0 1 .952 0l2.417 7.438a1.5 1.5 0 0 0 1.425 1.036h7.822a.5.5 0 0 1 .294.904l-6.328 4.597a1.5 1.5 0 0 0-.545 1.677l2.416 7.438a.5.5 0 0 1-.768.558l-6.327-4.596a1.5 1.5 0 0 0-1.764 0L8.791 26.73a.5.5 0 0 1-.769-.558l2.416-7.438a1.5 1.5 0 0 0-.544-1.677L3.566 12.46a.5.5 0 0 1 .294-.904h7.822a1.5 1.5 0 0 0 1.425-1.036zm32 0a.5.5 0 0 1 .952 0l2.417 7.438a1.5 1.5 0 0 0 1.425 1.036h7.822a.5.5 0 0 1 .294.904l-6.328 4.597a1.5 1.5 0 0 0-.544 1.677l2.416 7.438a.5.5 0 0 1-.769.558l-6.327-4.596a1.5 1.5 0 0 0-1.764 0l-6.327 4.596a.5.5 0 0 1-.768-.558l2.415-7.438a1.5 1.5 0 0 0-.544-1.677l-6.328-4.597a.5.5 0 0 1 .294-.904h7.822a1.5 1.5 0 0 0 1.425-1.036zm32 0a.5.5 0 0 1 .952 0l2.417 7.438a1.5 1.5 0 0 0 1.425 1.036h7.822a.5.5 0 0 1 .294.904l-6.328 4.597a1.5 1.5 0 0 0-.544 1.677l2.416 7.438a.5.5 0 0 1-.769.558l-6.327-4.596a1.5 1.5 0 0 0-1.764 0l-6.327 4.596a.5.5 0 0 1-.769-.558l2.416-7.438a1.5 1.5 0 0 0-.544-1.677l-6.328-4.597a.5.5 0 0 1 .294-.904h7.822a1.5 1.5 0 0 0 1.425-1.036zm32 0a.5.5 0 0 1 .952 0l2.417 7.438a1.5 1.5 0 0 0 1.425 1.036h7.822a.5.5 0 0 1 .294.904l-6.328 4.597a1.5 1.5 0 0 0-.544 1.677l2.416 7.438a.5.5 0 0 1-.769.558l-6.327-4.596a1.5 1.5 0 0 0-1.764 0l-6.327 4.596a.5.5 0 0 1-.769-.558l2.416-7.438a1.5 1.5 0 0 0-.544-1.677l-6.328-4.597a.5.5 0 0 1 .294-.904h7.822c.649 0 1.225-.419 1.425-1.036zm32 0a.5.5 0 0 1 .952 0l2.417 7.438a1.5 1.5 0 0 0 1.425 1.036h7.822a.5.5 0 0 1 .294.904l-6.328 4.597a1.5 1.5 0 0 0-.544 1.677l2.416 7.438a.5.5 0 0 1-.769.558l-6.327-4.596a1.5 1.5 0 0 0-1.764 0l-6.327 4.596a.5.5 0 0 1-.769-.558l2.416-7.438a1.5 1.5 0 0 0-.544-1.677l-6.328-4.597a.5.5 0 0 1 .294-.904h7.822c.649 0 1.225-.419 1.425-1.036z" fill="%23FF8F4A" stroke="%23FF8F4A"/></svg>');
        -webkit-mask-size: contain;
        mask-size: contain
    }

    .listing__rating-stars::after {
        background: var(--star-color);
        -webkit-mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="160" height="32" viewBox="0 0 160 32" fill="none"><path d="M15.524 3.082a.5.5 0 0 1 .952 0l2.417 7.438a1.5 1.5 0 0 0 1.425 1.036h7.822a.5.5 0 0 1 .294.904l-6.328 4.597a1.5 1.5 0 0 0-.545 1.677l2.416 7.438a.5.5 0 0 1-.768.558l-6.327-4.596a1.5 1.5 0 0 0-1.764 0L8.791 26.73a.5.5 0 0 1-.769-.558l2.416-7.438a1.5 1.5 0 0 0-.544-1.677L3.566 12.46a.5.5 0 0 1 .294-.904h7.822a1.5 1.5 0 0 0 1.425-1.036zm32 0a.5.5 0 0 1 .952 0l2.417 7.438a1.5 1.5 0 0 0 1.425 1.036h7.822a.5.5 0 0 1 .294.904l-6.328 4.597a1.5 1.5 0 0 0-.545 1.677l2.416 7.438a.5.5 0 0 1-.768.558l-6.327-4.596a1.5 1.5 0 0 0-1.764 0l-6.327 4.596a.5.5 0 0 1-.769-.558l2.416-7.438a1.5 1.5 0 0 0-.544-1.677l-6.328-4.597a.5.5 0 0 1 .294-.904h7.822a1.5 1.5 0 0 0 1.425-1.036zm32 0a.5.5 0 0 1 .952 0l2.417 7.438a1.5 1.5 0 0 0 1.425 1.036h7.822a.5.5 0 0 1 .294.904l-6.328 4.597a1.5 1.5 0 0 0-.545 1.677l2.416 7.438a.5.5 0 0 1-.768.558l-6.327-4.596a1.5 1.5 0 0 0-1.764 0l-6.327 4.596a.5.5 0 0 1-.769-.558l2.416-7.438a1.5 1.5 0 0 0-.544-1.677l-6.328-4.597a.5.5 0 0 1 .294-.904h7.822a1.5 1.5 0 0 0 1.425-1.036zm32 0a.5.5 0 0 1 .952 0l2.417 7.438a1.5 1.5 0 0 0 1.425 1.036h7.822a.5.5 0 0 1 .294.904l-6.328 4.597a1.5 1.5 0 0 0-.545 1.677l2.416 7.438a.5.5 0 0 1-.768.558l-6.327-4.596a1.5 1.5 0 0 0-1.764 0l-6.327 4.596a.5.5 0 0 1-.769-.558l2.416-7.438a1.5 1.5 0 0 0-.544-1.677l-6.328-4.597a.5.5 0 0 1 .294-.904h7.822a1.5 1.5 0 0 0 1.425-1.036zm32 0a.5.5 0 0 1 .952 0l2.417 7.438a1.5 1.5 0 0 0 1.425 1.036h7.822a.5.5 0 0 1 .294.904l-6.328 4.597a1.5 1.5 0 0 0-.545 1.677l2.416 7.438a.5.5 0 0 1-.768.558l-6.327-4.596a1.5 1.5 0 0 0-1.764 0l-6.327 4.596a.5.5 0 0 1-.769-.558l2.416-7.438a1.5 1.5 0 0 0-.544-1.677l-6.328-4.597a.5.5 0 0 1 .294-.904h7.822a1.5 1.5 0 0 0 1.425-1.036z" stroke="%23FF8F4A"/></svg>');
        mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="160" height="32" viewBox="0 0 160 32" fill="none"><path d="M15.524 3.082a.5.5 0 0 1 .952 0l2.417 7.438a1.5 1.5 0 0 0 1.425 1.036h7.822a.5.5 0 0 1 .294.904l-6.328 4.597a1.5 1.5 0 0 0-.545 1.677l2.416 7.438a.5.5 0 0 1-.768.558l-6.327-4.596a1.5 1.5 0 0 0-1.764 0L8.791 26.73a.5.5 0 0 1-.769-.558l2.416-7.438a1.5 1.5 0 0 0-.544-1.677L3.566 12.46a.5.5 0 0 1 .294-.904h7.822a1.5 1.5 0 0 0 1.425-1.036zm32 0a.5.5 0 0 1 .952 0l2.417 7.438a1.5 1.5 0 0 0 1.425 1.036h7.822a.5.5 0 0 1 .294.904l-6.328 4.597a1.5 1.5 0 0 0-.545 1.677l2.416 7.438a.5.5 0 0 1-.768.558l-6.327-4.596a1.5 1.5 0 0 0-1.764 0l-6.327 4.596a.5.5 0 0 1-.769-.558l2.416-7.438a1.5 1.5 0 0 0-.544-1.677l-6.328-4.597a.5.5 0 0 1 .294-.904h7.822a1.5 1.5 0 0 0 1.425-1.036zm32 0a.5.5 0 0 1 .952 0l2.417 7.438a1.5 1.5 0 0 0 1.425 1.036h7.822a.5.5 0 0 1 .294.904l-6.328 4.597a1.5 1.5 0 0 0-.545 1.677l2.416 7.438a.5.5 0 0 1-.768.558l-6.327-4.596a1.5 1.5 0 0 0-1.764 0l-6.327 4.596a.5.5 0 0 1-.769-.558l2.416-7.438a1.5 1.5 0 0 0-.544-1.677l-6.328-4.597a.5.5 0 0 1 .294-.904h7.822a1.5 1.5 0 0 0 1.425-1.036zm32 0a.5.5 0 0 1 .952 0l2.417 7.438a1.5 1.5 0 0 0 1.425 1.036h7.822a.5.5 0 0 1 .294.904l-6.328 4.597a1.5 1.5 0 0 0-.545 1.677l2.416 7.438a.5.5 0 0 1-.768.558l-6.327-4.596a1.5 1.5 0 0 0-1.764 0l-6.327 4.596a.5.5 0 0 1-.769-.558l2.416-7.438a1.5 1.5 0 0 0-.544-1.677l-6.328-4.597a.5.5 0 0 1 .294-.904h7.822a1.5 1.5 0 0 0 1.425-1.036zm32 0a.5.5 0 0 1 .952 0l2.417 7.438a1.5 1.5 0 0 0 1.425 1.036h7.822a.5.5 0 0 1 .294.904l-6.328 4.597a1.5 1.5 0 0 0-.545 1.677l2.416 7.438a.5.5 0 0 1-.768.558l-6.327-4.596a1.5 1.5 0 0 0-1.764 0l-6.327 4.596a.5.5 0 0 1-.769-.558l2.416-7.438a1.5 1.5 0 0 0-.544-1.677l-6.328-4.597a.5.5 0 0 1 .294-.904h7.822a1.5 1.5 0 0 0 1.425-1.036z" stroke="%23FF8F4A"/></svg>');
        -webkit-mask-size: contain;
        mask-size: contain
    }
}

@media (max-width: 575.9px) {
    .listing__rating-stars::before, .listing__rating-stars::after {
        content: "";
        font-size: 18px;
        line-height: 16px;
        height: 18px
    }

    @supports (mask: url(#)) {
        .listing__rating-stars::before, .listing__rating-stars::after {
            width: 90px;
            height: 18px
        }
    }
}

@media (max-width: 1239.9px) {
    .listing__item-info {
        flex: 1
    }

    .listing__item-bonus {
        flex: 1.38
    }

    .listing__item-btns {
        flex: 1;
        max-width: unset
    }
}

@media (max-width: 991.9px) {
    .listing__item {
        display: grid;
        grid-template-columns:1fr 1fr
    }

    .listing__item-info {
        grid-column: 1/-1
    }
}

@media (max-width: 767.9px) {
    .listing__item {
        grid-template-columns:1fr
    }
}

@media (max-width: 575.9px) {
    .listing {
        margin-top: 20px
    }

    .listing__list {
        gap: 16px
    }

    .listing__item {
        padding: 14px;
        gap: 16px
    }

    .listing__item-bonus {
        gap: 10px
    }

    .listing__item-info {
        display: grid;
        grid-template-columns:90px 1fr;
        gap: 16px 8px
    }

    .listing__item-info > img, .listing__item-info > svg {
        height: 90px
    }

    .listing__item-player {
        gap: 8px
    }

    .listing__rating {
        gap: 4px;
        font-size: 0.75rem;
        line-height: 1.375rem
    }
}

.how-to {
    margin-top: 24px;
    counter-reset: how-to;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 32px
}

.how-to:first-child {
    margin-top: 0
}

.how-to__item {
    counter-increment: how-to;
    overflow: hidden;
    border-radius: 16px;
    background: var(--surface-surface-bright, #4c3a2f);
    padding: 0 32px 32px;
    display: grid;
    grid-template-columns:1fr 1fr;
    gap: 32px 24px
}

.how-to__item-title {
    grid-column: 1/-1;
    margin: 0 0 0 -32px;
    padding: 32px;
    width: calc(100% + 64px);
    background: var(--surface-surface-dim, #221a16);
    color: var(--On-Surface, #fff);
    text-align: center;
    font-size: 1.375rem;
    line-height: 2rem;
    font-weight: 700
}

@media (max-width: 575.9px) {
    .how-to__item-title {
        font-size: 1.125rem;
        line-height: 1.5rem
    }
}

.how-to__item-title::before {
    content: counter(how-to) ". "
}

.how-to__item img {
    width: 100%;
    border-radius: 16px
}

.how-to__item-content .btn {
    margin-top: 20px
}

.how-to__item-content .btn:first-child {
    margin-top: 0
}

@media (max-width: 991.9px) {
    .how-to__item {
        grid-template-columns:1fr;
        gap: 24px
    }

    .how-to__item-title {
        margin-bottom: 8px
    }
}

@media (max-width: 575.9px) {
    .how-to {
        gap: 24px
    }

    .how-to__item {
        padding: 0 16px 16px;
        gap: 16px
    }

    .how-to__item-title {
        width: calc(100% + 32px);
        margin-left: -16px;
        margin-bottom: 0;
        padding: 16px
    }

    .how-to__item-content .btn {
        width: 100%
    }
}

.author-block {
    margin-top: 24px;
    padding: 32px;
    border-radius: 16px;
    background: var(--surface-surface-dim, #221a16);
    box-shadow: 0 1px 3px 1px rgba(0, 0, 0, .15), 0 1px 2px 0 rgba(0, 0, 0, .3);
    display: grid;
    grid-template-columns:100px 1fr;
    gap: 8px
}

.author-block:first-child {
    margin-top: 0
}

.author-block img {
    width: 100%
}

.author-block__info {
    display: grid;
    grid-template-columns:auto 1fr;
    grid-auto-flow: dense;
    gap: 16px 8px
}

.author-block__info > * {
    grid-column: 1/-1
}

.author-block__info .author-block__name {
    grid-column: 1/2
}

.author-block__info .author-block__rating {
    grid-column: 2/3
}

.author-block__name {
    color: var(--on-surface-on-surface-light, #fff);
    font-size: 1.375rem;
    line-height: 2rem;
    font-weight: 700
}

@media (max-width: 575.9px) {
    .author-block__name {
        font-size: 1.125rem;
        line-height: 1.5rem
    }
}

.author-block__rating {
    color: var(--on-surface-on-surface, #f5f2ef);
    text-align: center;
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 700;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    --percent: calc(var(--rating, 4.5) / 5 * 100%)
}

.author-block__rating::before, .author-block__rating::after {
    content: "";
    font-size: 24px;
    line-height: 22px;
    height: 24px;
    letter-spacing: 0px;
    font-weight: 100
}

.author-block__rating::before {
    content: "★★★★★";
    display: block;
    background: linear-gradient(90deg, var(--star-color) var(--percent), var(--star-bg) var(--percent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: rgba(0, 0, 0, 0)
}

.author-block__rating::after {
    content: "☆☆☆☆☆";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: block;
    letter-spacing: 0px;
    color: var(--star-color)
}

@media (max-width: 575.9px) {
    .author-block__rating::before, .author-block__rating::after {
        font-size: 18px;
        line-height: 16px;
        height: 18px;
        letter-spacing: 0px
    }
}

@supports (mask: url(#)) {
    .author-block__rating::before, .author-block__rating::after {
        content: "";
        width: 120px;
        height: 24px;
        color: unset;
        -webkit-background-clip: unset;
        -webkit-text-fill-color: unset;
        background-clip: unset
    }

    .author-block__rating::before {
        background: linear-gradient(90deg, var(--star-color) var(--percent), var(--star-bg) var(--percent));
        -webkit-mask: url('data:image/svg+xml,<svg width="160" height="32" viewBox="0 0 160 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15.524 3.082a.5.5 0 0 1 .952 0l2.417 7.438a1.5 1.5 0 0 0 1.425 1.036h7.822a.5.5 0 0 1 .294.904l-6.328 4.597a1.5 1.5 0 0 0-.545 1.677l2.416 7.438a.5.5 0 0 1-.768.558l-6.327-4.596a1.5 1.5 0 0 0-1.764 0L8.791 26.73a.5.5 0 0 1-.769-.558l2.416-7.438a1.5 1.5 0 0 0-.544-1.677L3.566 12.46a.5.5 0 0 1 .294-.904h7.822a1.5 1.5 0 0 0 1.425-1.036zm32 0a.5.5 0 0 1 .952 0l2.417 7.438a1.5 1.5 0 0 0 1.425 1.036h7.822a.5.5 0 0 1 .294.904l-6.328 4.597a1.5 1.5 0 0 0-.544 1.677l2.416 7.438a.5.5 0 0 1-.769.558l-6.327-4.596a1.5 1.5 0 0 0-1.764 0l-6.327 4.596a.5.5 0 0 1-.768-.558l2.415-7.438a1.5 1.5 0 0 0-.544-1.677l-6.328-4.597a.5.5 0 0 1 .294-.904h7.822a1.5 1.5 0 0 0 1.425-1.036zm32 0a.5.5 0 0 1 .952 0l2.417 7.438a1.5 1.5 0 0 0 1.425 1.036h7.822a.5.5 0 0 1 .294.904l-6.328 4.597a1.5 1.5 0 0 0-.544 1.677l2.416 7.438a.5.5 0 0 1-.769.558l-6.327-4.596a1.5 1.5 0 0 0-1.764 0l-6.327 4.596a.5.5 0 0 1-.769-.558l2.416-7.438a1.5 1.5 0 0 0-.544-1.677l-6.328-4.597a.5.5 0 0 1 .294-.904h7.822a1.5 1.5 0 0 0 1.425-1.036zm32 0a.5.5 0 0 1 .952 0l2.417 7.438a1.5 1.5 0 0 0 1.425 1.036h7.822a.5.5 0 0 1 .294.904l-6.328 4.597a1.5 1.5 0 0 0-.544 1.677l2.416 7.438a.5.5 0 0 1-.769.558l-6.327-4.596a1.5 1.5 0 0 0-1.764 0l-6.327 4.596a.5.5 0 0 1-.769-.558l2.416-7.438a1.5 1.5 0 0 0-.544-1.677l-6.328-4.597a.5.5 0 0 1 .294-.904h7.822c.649 0 1.225-.419 1.425-1.036zm32 0a.5.5 0 0 1 .952 0l2.417 7.438a1.5 1.5 0 0 0 1.425 1.036h7.822a.5.5 0 0 1 .294.904l-6.328 4.597a1.5 1.5 0 0 0-.544 1.677l2.416 7.438a.5.5 0 0 1-.769.558l-6.327-4.596a1.5 1.5 0 0 0-1.764 0l-6.327 4.596a.5.5 0 0 1-.769-.558l2.416-7.438a1.5 1.5 0 0 0-.544-1.677l-6.328-4.597a.5.5 0 0 1 .294-.904h7.822c.649 0 1.225-.419 1.425-1.036z" fill="%23FF8F4A" stroke="%23FF8F4A"/></svg>');
        mask: url('data:image/svg+xml,<svg width="160" height="32" viewBox="0 0 160 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15.524 3.082a.5.5 0 0 1 .952 0l2.417 7.438a1.5 1.5 0 0 0 1.425 1.036h7.822a.5.5 0 0 1 .294.904l-6.328 4.597a1.5 1.5 0 0 0-.545 1.677l2.416 7.438a.5.5 0 0 1-.768.558l-6.327-4.596a1.5 1.5 0 0 0-1.764 0L8.791 26.73a.5.5 0 0 1-.769-.558l2.416-7.438a1.5 1.5 0 0 0-.544-1.677L3.566 12.46a.5.5 0 0 1 .294-.904h7.822a1.5 1.5 0 0 0 1.425-1.036zm32 0a.5.5 0 0 1 .952 0l2.417 7.438a1.5 1.5 0 0 0 1.425 1.036h7.822a.5.5 0 0 1 .294.904l-6.328 4.597a1.5 1.5 0 0 0-.544 1.677l2.416 7.438a.5.5 0 0 1-.769.558l-6.327-4.596a1.5 1.5 0 0 0-1.764 0l-6.327 4.596a.5.5 0 0 1-.768-.558l2.415-7.438a1.5 1.5 0 0 0-.544-1.677l-6.328-4.597a.5.5 0 0 1 .294-.904h7.822a1.5 1.5 0 0 0 1.425-1.036zm32 0a.5.5 0 0 1 .952 0l2.417 7.438a1.5 1.5 0 0 0 1.425 1.036h7.822a.5.5 0 0 1 .294.904l-6.328 4.597a1.5 1.5 0 0 0-.544 1.677l2.416 7.438a.5.5 0 0 1-.769.558l-6.327-4.596a1.5 1.5 0 0 0-1.764 0l-6.327 4.596a.5.5 0 0 1-.769-.558l2.416-7.438a1.5 1.5 0 0 0-.544-1.677l-6.328-4.597a.5.5 0 0 1 .294-.904h7.822a1.5 1.5 0 0 0 1.425-1.036zm32 0a.5.5 0 0 1 .952 0l2.417 7.438a1.5 1.5 0 0 0 1.425 1.036h7.822a.5.5 0 0 1 .294.904l-6.328 4.597a1.5 1.5 0 0 0-.544 1.677l2.416 7.438a.5.5 0 0 1-.769.558l-6.327-4.596a1.5 1.5 0 0 0-1.764 0l-6.327 4.596a.5.5 0 0 1-.769-.558l2.416-7.438a1.5 1.5 0 0 0-.544-1.677l-6.328-4.597a.5.5 0 0 1 .294-.904h7.822c.649 0 1.225-.419 1.425-1.036zm32 0a.5.5 0 0 1 .952 0l2.417 7.438a1.5 1.5 0 0 0 1.425 1.036h7.822a.5.5 0 0 1 .294.904l-6.328 4.597a1.5 1.5 0 0 0-.544 1.677l2.416 7.438a.5.5 0 0 1-.769.558l-6.327-4.596a1.5 1.5 0 0 0-1.764 0l-6.327 4.596a.5.5 0 0 1-.769-.558l2.416-7.438a1.5 1.5 0 0 0-.544-1.677l-6.328-4.597a.5.5 0 0 1 .294-.904h7.822c.649 0 1.225-.419 1.425-1.036z" fill="%23FF8F4A" stroke="%23FF8F4A"/></svg>');
        -webkit-mask-size: contain;
        mask-size: contain
    }

    .author-block__rating::after {
        background: var(--star-color);
        -webkit-mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="160" height="32" viewBox="0 0 160 32" fill="none"><path d="M15.524 3.082a.5.5 0 0 1 .952 0l2.417 7.438a1.5 1.5 0 0 0 1.425 1.036h7.822a.5.5 0 0 1 .294.904l-6.328 4.597a1.5 1.5 0 0 0-.545 1.677l2.416 7.438a.5.5 0 0 1-.768.558l-6.327-4.596a1.5 1.5 0 0 0-1.764 0L8.791 26.73a.5.5 0 0 1-.769-.558l2.416-7.438a1.5 1.5 0 0 0-.544-1.677L3.566 12.46a.5.5 0 0 1 .294-.904h7.822a1.5 1.5 0 0 0 1.425-1.036zm32 0a.5.5 0 0 1 .952 0l2.417 7.438a1.5 1.5 0 0 0 1.425 1.036h7.822a.5.5 0 0 1 .294.904l-6.328 4.597a1.5 1.5 0 0 0-.545 1.677l2.416 7.438a.5.5 0 0 1-.768.558l-6.327-4.596a1.5 1.5 0 0 0-1.764 0l-6.327 4.596a.5.5 0 0 1-.769-.558l2.416-7.438a1.5 1.5 0 0 0-.544-1.677l-6.328-4.597a.5.5 0 0 1 .294-.904h7.822a1.5 1.5 0 0 0 1.425-1.036zm32 0a.5.5 0 0 1 .952 0l2.417 7.438a1.5 1.5 0 0 0 1.425 1.036h7.822a.5.5 0 0 1 .294.904l-6.328 4.597a1.5 1.5 0 0 0-.545 1.677l2.416 7.438a.5.5 0 0 1-.768.558l-6.327-4.596a1.5 1.5 0 0 0-1.764 0l-6.327 4.596a.5.5 0 0 1-.769-.558l2.416-7.438a1.5 1.5 0 0 0-.544-1.677l-6.328-4.597a.5.5 0 0 1 .294-.904h7.822a1.5 1.5 0 0 0 1.425-1.036zm32 0a.5.5 0 0 1 .952 0l2.417 7.438a1.5 1.5 0 0 0 1.425 1.036h7.822a.5.5 0 0 1 .294.904l-6.328 4.597a1.5 1.5 0 0 0-.545 1.677l2.416 7.438a.5.5 0 0 1-.768.558l-6.327-4.596a1.5 1.5 0 0 0-1.764 0l-6.327 4.596a.5.5 0 0 1-.769-.558l2.416-7.438a1.5 1.5 0 0 0-.544-1.677l-6.328-4.597a.5.5 0 0 1 .294-.904h7.822a1.5 1.5 0 0 0 1.425-1.036zm32 0a.5.5 0 0 1 .952 0l2.417 7.438a1.5 1.5 0 0 0 1.425 1.036h7.822a.5.5 0 0 1 .294.904l-6.328 4.597a1.5 1.5 0 0 0-.545 1.677l2.416 7.438a.5.5 0 0 1-.768.558l-6.327-4.596a1.5 1.5 0 0 0-1.764 0l-6.327 4.596a.5.5 0 0 1-.769-.558l2.416-7.438a1.5 1.5 0 0 0-.544-1.677l-6.328-4.597a.5.5 0 0 1 .294-.904h7.822a1.5 1.5 0 0 0 1.425-1.036z" stroke="%23FF8F4A"/></svg>');
        mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="160" height="32" viewBox="0 0 160 32" fill="none"><path d="M15.524 3.082a.5.5 0 0 1 .952 0l2.417 7.438a1.5 1.5 0 0 0 1.425 1.036h7.822a.5.5 0 0 1 .294.904l-6.328 4.597a1.5 1.5 0 0 0-.545 1.677l2.416 7.438a.5.5 0 0 1-.768.558l-6.327-4.596a1.5 1.5 0 0 0-1.764 0L8.791 26.73a.5.5 0 0 1-.769-.558l2.416-7.438a1.5 1.5 0 0 0-.544-1.677L3.566 12.46a.5.5 0 0 1 .294-.904h7.822a1.5 1.5 0 0 0 1.425-1.036zm32 0a.5.5 0 0 1 .952 0l2.417 7.438a1.5 1.5 0 0 0 1.425 1.036h7.822a.5.5 0 0 1 .294.904l-6.328 4.597a1.5 1.5 0 0 0-.545 1.677l2.416 7.438a.5.5 0 0 1-.768.558l-6.327-4.596a1.5 1.5 0 0 0-1.764 0l-6.327 4.596a.5.5 0 0 1-.769-.558l2.416-7.438a1.5 1.5 0 0 0-.544-1.677l-6.328-4.597a.5.5 0 0 1 .294-.904h7.822a1.5 1.5 0 0 0 1.425-1.036zm32 0a.5.5 0 0 1 .952 0l2.417 7.438a1.5 1.5 0 0 0 1.425 1.036h7.822a.5.5 0 0 1 .294.904l-6.328 4.597a1.5 1.5 0 0 0-.545 1.677l2.416 7.438a.5.5 0 0 1-.768.558l-6.327-4.596a1.5 1.5 0 0 0-1.764 0l-6.327 4.596a.5.5 0 0 1-.769-.558l2.416-7.438a1.5 1.5 0 0 0-.544-1.677l-6.328-4.597a.5.5 0 0 1 .294-.904h7.822a1.5 1.5 0 0 0 1.425-1.036zm32 0a.5.5 0 0 1 .952 0l2.417 7.438a1.5 1.5 0 0 0 1.425 1.036h7.822a.5.5 0 0 1 .294.904l-6.328 4.597a1.5 1.5 0 0 0-.545 1.677l2.416 7.438a.5.5 0 0 1-.768.558l-6.327-4.596a1.5 1.5 0 0 0-1.764 0l-6.327 4.596a.5.5 0 0 1-.769-.558l2.416-7.438a1.5 1.5 0 0 0-.544-1.677l-6.328-4.597a.5.5 0 0 1 .294-.904h7.822a1.5 1.5 0 0 0 1.425-1.036zm32 0a.5.5 0 0 1 .952 0l2.417 7.438a1.5 1.5 0 0 0 1.425 1.036h7.822a.5.5 0 0 1 .294.904l-6.328 4.597a1.5 1.5 0 0 0-.545 1.677l2.416 7.438a.5.5 0 0 1-.768.558l-6.327-4.596a1.5 1.5 0 0 0-1.764 0l-6.327 4.596a.5.5 0 0 1-.769-.558l2.416-7.438a1.5 1.5 0 0 0-.544-1.677l-6.328-4.597a.5.5 0 0 1 .294-.904h7.822a1.5 1.5 0 0 0 1.425-1.036z" stroke="%23FF8F4A"/></svg>');
        -webkit-mask-size: contain;
        mask-size: contain
    }
}

@media (max-width: 575.9px) {
    .author-block__rating::before, .author-block__rating::after {
        content: "";
        font-size: 18px;
        line-height: 16px;
        height: 18px
    }

    @supports (mask: url(#)) {
        .author-block__rating::before, .author-block__rating::after {
            width: 90px;
            height: 18px
        }
    }
}

.author-block__position {
    color: var(--on-surface-on-surface-light, #fff)
}

.author-block__descr {
    color: var(--on-surface-on-surface-dark, #d8c3b4)
}

.author-block__chips {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    flex-wrap: wrap
}

.author-block__chips-item {
    padding: 4px 16px;
    border-radius: 8px;
    border: 1px solid var(--outline-outline, #6c4e3c);
    color: var(--on-surface-on-surface-light, #fff);
    text-align: center;
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 700
}

@media (max-width: 575.9px) {
    .author-block {
        margin-top: 20px;
        padding: 16px;
        grid-template-columns:60px 1fr
    }

    .author-block__info .author-block__name {
        grid-column: 1/-1
    }

    .author-block__info .author-block__position {
        grid-column: 1/2
    }

    .author-block__name {
        margin-bottom: -8px
    }
}

.external-links {
    display: flex;
    flex-wrap: wrap;
	justify-content: center;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.external-links__item {
    display: flex;
}

.external-links__link {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.external-links__image {
    display: block;
    object-fit: contain;
}

@media (max-width: 575.9px) {
    .external-links {
        justify-content: flex-start;
        gap: 8px;
    }

    .external-links__image {
        width: 24px;
        height: 24px;
    }
	
		
	.header-menu {
		padding: 0;
	}
	
	.header__btns {
		gap: 10px;
	}
	
	.header__btns .btn {
		padding: 12px;
		font-size: 14px;
  		line-height: 16px;
	}
	
	.header__btns .btn svg {
		max-width: 24px;
		max-height: 24px;
	}
}