@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap");
     body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, button, input, p, blockquote, th, td {
         margin: 0;
         padding: 0;
    }
     fieldset, img {
         border: 0;
    }
     img, object, embed {
         vertical-align: bottom;
    }
     address, caption, cite, code, dfn, em, th, var {
         font-style: normal;
         font-weight: normal;
    }
     ol, ul {
         list-style: none;
    }
     caption, th {
         text-align: left;
    }
     h1, h2, h3, h4, h5, h6 {
         font-size: 100%;
    }
     q:before, q:after {
         content: '';
    }
     a * {
         cursor: pointer;
    }
     input, textarea {
         outline: none;
    }
     :root {
         --font-size-general: 16px;
         --line-height-general: 1.2;
         --default-font: 'Roboto', sans-serif;
         --color-main: #000;
         --color-dark: 0, 0, 0;
         --color-second: #787889;
         --color-active: #332B9F;
         --color-white: #fff;
         --color-green: #00BD62;
         --color-coin: #000;
         --color-red: rgb(173, 6, 6);
         --bg-main: #eeedf2;
         --bg-white: #fff;
         --bg-active: #332B9F;
         --bg-second-active: #3428d6;
         --bg-gradient-card: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #fff 100%);
         --bg-mask: 238, 237, 242;
         --bg-top-aside: #d4d1df;
         --bg-dark-blue: #1d176c;
         --bg-darkness-blue: #050049;
         --bg-green: #00bd62;
         --bg-light-green: #02a958;
         --header-height: 60px;
         --aside-width: 228px;
    }
     html {
         height: 100%;
         min-width: 320px;
         -webkit-text-size-adjust: 100%;
         -ms-text-size-adjust: 100%;
    }
     body {
         font: var(--font-size-general)/var(--line-height-general) var(--default-font);
         font-weight: 400;
         height: 100%;
         min-width: 320px;
         position: relative;
         color: var(--color-main);
         background: var(--bg-main);
    }
     @media screen and (max-width: 767px) {
         body.open-menu .mask {
             opacity: 1;
             transform: translate3d(0, 0, 0);
             visibility: visible;
        }
         body.open-menu .aside-box {
             transform: translate3d(0, 0, 0);
             opacity: 1;
             visibility: visible;
        }
         body.open-menu .hamburger::before, body.open-menu .hamburger::after {
             top: 50%;
             left: 50%;
             width: 26px;
        }
         body.open-menu .hamburger::before {
             transform: rotate(45deg) translate3d(-50%, -50%, 0);
        }
         body.open-menu .hamburger::after {
             transform: rotate(-45deg) translate3d(-50%, -50%, 0);
        }
         body.open-menu .hamburger span {
             opacity: 0;
             transform: translate3d(-20px, -50%, 0);
             visibility: hidden;
        }
    }
     @media screen and (max-width: 767px) {
         body.scroll-locked {
             height: 100%;
             overflow: hidden;
             position: fixed;
             width: 100%;
        }
    }
     @media screen and (max-width: 767px) {
         body.show-search .search {
             top: 50%;
             visibility: visible;
             opacity: 1;
        }
         body.show-search .search-icon {
             display: none;
        }
         body.show-search .close-icon {
             display: block;
        }
    }
     a {
         color: #2600ff;
         text-decoration: none;
    }
     input {
         outline: none;
         -webkit-appearance: none;
         border-radius: 0;
    }
     input, textarea, button {
         font-family: inherit;
         font-weight: inherit;
         font-size: inherit;
    }
     * {
         box-sizing: border-box;
         outline: none;
    }
     *:before, *:after {
         box-sizing: border-box;
    }
     * ::-moz-selection {
         background: #2600ff;
         color: #fff;
    }
     * ::selection {
         background: #2600ff;
         color: #fff;
    }
     .svg-icon {
         display: inline-block;
         vertical-align: top;
         width: 1em;
         height: 1em;
         fill: currentColor;
    }
     input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
         color: #787889;
    }
     input:-moz-placeholder, textarea:-moz-placeholder {
         color: #787889;
         opacity: 1;
    }
     input::-moz-placeholder, textarea::-moz-placeholder {
         color: #787889;
         opacity: 1;
    }
     input:-ms-input-placeholder, textarea:-ms-input-placeholder {
         color: #787889;
    }
     input:focus::-webkit-input-placeholder, textarea:focus::-webkit-input-placeholder {
         color: transparent;
    }
     input:focus:-moz-placeholder, textarea:focus:-moz-placeholder {
         color: transparent;
    }
     input:focus::-moz-placeholder, textarea:focus::-moz-placeholder {
         color: transparent;
    }
     input:focus:-ms-input-placeholder, textarea:focus:-ms-input-placeholder {
         color: transparent;
    }
     input.placeholder, textarea.placeholder {
         color: #787889 !important;
    }
     .wrapper {
         display: flex;
         flex-direction: column;
         min-height: 100vh;
    }
     .container {
         max-width: 1692px;
         width: 100%;
         margin: 0 auto;
         padding: 0 50px;
    }
     @media screen and (max-width: 1366px) {
         .container {
             padding: 0 20px;
        }
    }
     @media screen and (max-width: 1024px) {
         .container {
             padding: 0 10px;
        }
    }
     .header {
         background-color: var(--bg-dark-blue);
         padding: 10px 20px;
         flex-shrink: 0;
         flex-grow: 0;
         display: flex;
         gap: 0 50px;
    }
     @media screen and (max-width: 1280px) {
         .header {
             gap: 0 10px;
        }
    }
     @media screen and (max-width: 1024px) {
         .header {
             padding: 20px 10px;
        }
    }
     @media screen and (max-width: 767px) {
         .header {
             position: relative;
             justify-content: space-between;
        }
    }
     .hamburger {
         display: none;
         cursor: pointer;
         align-items: center;
         align-self: center;
         height: 20px;
         position: relative;
         z-index: 2;
         width: 20px;
         opacity: 1;
         background: none;
         border: none;
         transform: translateZ(0);
         transition: opacity 0.3s, visibility 0.3s, transform 0.3s;
         visibility: visible;
         flex-grow: 0;
         flex-shrink: 0;
    }
     .hamburger::after, .hamburger::before, .hamburger span {
         content: "";
         height: 3px;
         position: absolute;
         left: 0;
         right: 0;
         border-radius: 10px;
         background-color: var(--bg-white);
         transform-origin: top left;
         transition: background-color 0.3s, transform 0.3s;
    }
     .hamburger::before, .hamburger::after {
         transform: translate3d(0, 0, 0) rotate(0);
         left: auto;
         width: 100%;
    }
     .hamburger::before {
         top: 0;
         bottom: auto;
    }
     .hamburger::after {
         top: auto;
         bottom: 0;
    }
     .hamburger span {
         top: 50%;
         opacity: 1;
         visibility: visible;
         transform: translate3d(0, -50%, 0) rotate(0);
         transition: background-color 0.2s, opacity 0.2s, visibility 0.2s, transform 0.2s;
    }
     @media screen and (max-width: 767px) {
         .hamburger {
             display: flex;
        }
    }
     .logo {
         flex-grow: 0;
         flex-shrink: 0;
         height: 100%;
         align-self: center;
         width: 100%;
         max-width: calc(var(--aside-width) - 20px);
    }
     .logo img {
         max-width: 100%;
    }
     .header-nav {
         display: flex;
         align-items: center;
         flex-grow: 0;
         flex-shrink: 0;
         gap: 10px;
    }
     @media screen and (max-width: 1280px) {
         .header-nav {
             gap: 5px;
        }
    }
     @media screen and (max-width: 1024px) {
         .header-nav {
             display: none;
        }
    }
     .header-nav li.active a {
         background: var(--bg-active);
    }
     .header-nav a {
         display: flex;
         align-items: center;
         color: var(--color-white);
         font-weight: 500;
         font-size: 14px;
         gap: 6px;
         text-transform: uppercase;
         padding: 10px 20px;
         border-radius: 10px;
         transition: background .3s;
    }
     @media screen and (min-width: 1025px) {
         .header-nav a:hover {
             background: var(--bg-darkness-blue);
        }
    }
     @media screen and (max-width: 1280px) {
         .header-nav a {
             padding: 10px 15px;
             font-size: 12px;
        }
    }
     .header-nav svg {
         font-size: 20px;
         flex-grow: 0;
         flex-shrink: 0;
    }
     @media screen and (max-width: 1280px) {
         .header-nav svg {
             font-size: 18px;
        }
    }
     .search {
         flex-shrink: 1;
         flex-grow: 1;
         display: flex;
         justify-content: center;
    }
     @media screen and (max-width: 767px) {
         .search {
             position: absolute;
             right: 0;
             padding: 0 44px 0 10px;
             top: 80%;
             left: 0;
             z-index: 3;
             opacity: 0;
             visibility: hidden;
             transition: opacity .3s, visibility .3s, top .3s;
             transform: translate3d(0, -50%, 0);
        }
    }
     .wrap-input {
         background-color: var(--bg-darkness-blue);
         display: flex;
         height: 100%;
         width: 100%;
         max-width: 580px;
         border-radius: 10px;
         height: 40px;
    }
     @media screen and (max-width: 1024px) {
         .wrap-input {
             max-width: 100%;
        }
    }
     .wrap-input .input {
         background: none;
         border: none;
         width: 100%;
         height: 100%;
         font-family: "Roboto", sans-serif;
         font-weight: 400;
         font-size: 14px;
         color: var(--color-white);
         padding-left: 20px;
    }
     .wrap-input .btn {
         flex-shrink: 0;
         flex-grow: 0;
         font-size: 20px;
         color: var(--color-white);
         background: none;
         border: none;
         cursor: pointer;
         height: 100%;
         width: 60px;
         display: flex;
         align-items: center;
         justify-content: center;
         transform: scale(1);
         transition: transform .3s;
    }
     @media screen and (min-width: 1025px) {
         .wrap-input .btn:hover {
             transform: scale(1.05);
        }
    }
     .action-search {
         display: none;
         align-items: center;
         justify-content: center;
         font-size: 24px;
         color: var(--color-white);
         background: none;
         border: none;
         cursor: pointer;
         position: relative;
         z-index: 5;
    }
     @media screen and (max-width: 767px) {
         .action-search {
             display: flex;
        }
    }
     .action-search .close-icon {
         display: none;
    }
     .panel-auth {
         display: flex;
         gap: 10px;
         font-weight: 600;
         font-size: 14px;
         flex-shrink: 0;
         flex-grow: 0;
    }
     @media screen and (max-width: 1024px) {
         .panel-auth {
             display: none;
        }
    }
     .panel-auth .btn {
         background: none;
         border: none;
         cursor: pointer;
         background-color: var(--bg-active);
         color: var(--color-white);
         padding: 10px 15px;
         border-radius: 10px;
         display: flex;
         align-items: center;
         transition: background .3s;
    }
     @media screen and (min-width: 1025px) {
         .panel-auth .btn:hover {
             background: var(--bg-darkness-blue);
        }
    }
     .panel-auth .btn.second {
         background-color: var(--bg-green);
    }
     @media screen and (min-width: 1025px) {
         .panel-auth .btn.second:hover {
             background: var(--bg-light-green);
        }
    }
     .main {
         flex-shrink: 1;
         flex-grow: 1;
         position: relative;
         padding: 20px 0 30px var(--aside-width);
    }
     @media screen and (max-width: 767px) {
         .main {
             padding: 10px 0 30px;
        }
    }
     .section {
         margin-bottom: 30px;
    }
     .section:last-child {
         margin-bottom: 0;
    }
     .aside-box {
         position: absolute;
         top: 0;
         left: 0;
         bottom: 0;
         width: var(--aside-width);
         z-index: 100;
         z-index: 5;
         background: var(--bg-white);
         transition: transform .3s, opacity .3s, visibility .3s;
         display: flex;
         flex-direction: column;
         padding-bottom: 20px;
    }
     @media screen and (max-width: 767px) {
         .aside-box {
             position: fixed;
             height: calc(100svh - var(--header-height));
             top: var(--header-height);
             opacity: 0;
             visibility: hidden;
             transform: translate3d(-50%, 0, 0);
             padding: 0;
        }
    }
     .aside-box .hold {
         display: flex;
         flex-direction: column;
         height: 100%;
         width: 100%;
         overflow: auto;
         padding: 0 20px;
    }
     .aside-box .row {
         margin-bottom: 30px;
         padding-bottom: 25px;
         border-bottom: 1px solid var(--bg-main);
    }
     .aside-box .row:last-child {
         margin-bottom: 0;
         padding-bottom: 0;
         border-bottom: none;
    }
     .aside-box .row:first-child {
         padding-bottom: 30px;
    }
     .aside-box .title {
         text-transform: uppercase;
         margin-bottom: 20px;
         font-weight: 500;
         color: var(--color-second);
    }
     .top-box {
         font-size: 24px;
         font-weight: 300;
         display: flex;
         align-items: center;
         gap: 10px;
         padding: 11px 20px;
         margin: -10px -20px 0;
         background: var(--bg-top-aside);
         margin-bottom: 5px;
    }
     @media screen and (max-width: 1024px) {
         .top-box {
             margin-bottom: 20px;
        }
    }
     .top-box strong {
         font-weight: 900;
    }
     .top-box .circle {
         background: var(--color-green);
         width: 12px;
         height: 12px;
         border-radius: 100%;
         flex-grow: 0;
         flex-shrink: 0;
    }
     .group-auth-tools {
         display: none;
         margin-bottom: 15px;
         font-weight: 600;
         font-size: 14px;
    }
     @media screen and (max-width: 1024px) {
         .group-auth-tools {
             display: block;
        }
    }
     .group-auth-tools .item {
         margin-bottom: 10px;
    }
     .group-auth-tools .item:last-child {
         margin-bottom: 0;
    }
     .group-auth-tools .btn {
         background: none;
         border: none;
         cursor: pointer;
         background-color: var(--bg-active);
         color: var(--color-white);
         padding: 12px 15px;
         border-radius: 10px;
         display: flex;
         align-items: center;
         justify-content: center;
    }
     .group-auth-tools .btn.second {
         background-color: var(--bg-green);
    }
     .general-list {
         margin: 0 -10px;
    }
     .general-list li {
         margin-bottom: 10px;
    }
     .general-list li:last-child {
         margin-bottom: 0;
    }
     .general-list .link {
         padding: 5px 10px;
         display: flex;
         align-items: center;
         gap: 10px;
         font-weight: 500;
         font-size: 14px;
         color: var(--color-main);
         border-radius: 5px;
         transition: background .3s;
    }
     @media screen and (min-width: 1025px) {
         .general-list .link:hover {
             background: var(--bg-main);
        }
    }
     .general-list svg {
         font-size: 20px;
         flex-grow: 0;
         flex-shrink: 0;
    }
     .categories-list li {
         margin-bottom: 5px;
    }
     .categories-list li:last-child {
         margin-bottom: 0;
    }
     .categories-list a {
         display: flex;
         align-items: center;
         gap: 5px;
         padding: 5px 0;
         font-size: 14px;
         color: var(--color-main);
         transition: color .3s;
         position: relative;
    }
     @media screen and (min-width: 1025px) {
         .categories-list a:hover {
             color: var(--color-active);
        }
         .categories-list a:hover::before {
             width: 100%;
        }
         .categories-list a:hover span:last-child {
             color: var(--color-main);
        }
    }
     .categories-list a::before {
         position: absolute;
         content: '';
         left: 0;
         right: 0;
         bottom: 0;
         background: var(--color-active);
         width: 0;
         height: 1px;
         transition: width .3s;
    }
     .categories-list a span:first-child {
         flex-grow: 1;
         flex-shrink: 1;
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
    }
     .categories-list a span:last-child {
         flex-grow: 0;
         flex-shrink: 0;
         color: var(--color-second);
         transition: color .3s;
    }
     .show-all {
         margin-top: 30px;
         text-align: center;
         display: block;
         color: var(--color-second);
         font-weight: 500;
         font-size: 14px;
         padding: 12px;
         background: var(--bg-main);
         text-transform: uppercase;
         border-radius: 10px;
         transition: color .3s, background .3s;
    }
     @media screen and (min-width: 1025px) {
         .show-all:hover {
             color: var(--color-white);
             background: var(--color-active);
        }
    }
     .sort-box {
         display: flex;
         align-items: center;
         justify-content: center;
         gap: 20px;
    }
     @media screen and (max-width: 410px) {
         .sort-box {
             gap: 10px;
             flex-wrap: wrap;
        }
    }
     .sort-box .wrap {
         display: flex;
         align-items: center;
         gap: 10px;
    }
     @media screen and (max-width: 410px) {
         .sort-box .wrap {
             gap: 5px;
        }
    }
     .sort-box .link {
         display: block;
         font-weight: 500;
         font-size: 14px;
         text-transform: uppercase;
         color: var(--color-second);
         background: var(--bg-white);
         padding: 10px 20px;
         border-radius: 10px;
         border: none;
         cursor: pointer;
         transition: color .3s, background .3s, padding .3s;
         position: relative;
    }
     @media screen and (min-width: 1025px) {
         .sort-box .link:hover {
             color: var(--color-white);
             background: var(--bg-active);
        }
    }
     @media screen and (max-width: 767px) {
         .sort-box .link {
             padding: 10px 15px;
        }
    }
     @media screen and (max-width: 410px) {
         .sort-box .link {
             font-size: 12px;
             padding: 11px 15px;
        }
    }
     .sort-box .link::before {
         position: absolute;
         content: '';
         left: 20px;
         top: 50%;
         transform: translate3d(0, -50%, 0);
         width: 0px;
         height: 8px;
         background: var(--color-white);
         border-radius: 100%;
         transition: width .3s;
    }
     @media screen and (max-width: 767px) {
         .sort-box .link::before {
             left: 15px;
        }
    }
     .sort-box .link.active {
         color: var(--color-white);
         padding-left: 33px;
         background: var(--bg-active);
    }
     @media screen and (max-width: 767px) {
         .sort-box .link.active {
             padding-left: 28px;
        }
    }
     .sort-box .link.active::before {
         width: 8px;
    }
     .filter-btn {
         cursor: pointer;
         display: flex;
         align-items: center;
         color: var(--color-active);
         font-size: 24px;
         border: none;
         background: none;
         flex-grow: 0;
         flex-shrink: 0;
    }
     @media screen and (min-width: 1025px) {
         .filter-btn:hover svg {
             transform: scale(1.03);
        }
    }
     @media screen and (max-width: 410px) {
         .filter-btn {
             font-size: 22px;
        }
    }
     .filter-btn .close {
         display: none;
    }
     .filter-btn svg {
         transition: transform .3s;
         transform: scale(1);
    }
     .wrapped-filter {
         margin-bottom: 30px;
    }
     .wrapped-filter.active .general-filter {
         display: block;
    }
     .wrapped-filter.active .filter-btn .close {
         display: block;
    }
     .wrapped-filter.active .filter-btn .filter {
         display: none;
    }
     .general-filter {
         padding: 30px 50px;
         background: var(--bg-white);
         border-radius: 10px;
         margin-top: 10px;
         display: none;
    }
     @media screen and (max-width: 1600px) {
         .general-filter {
             padding: 30px;
        }
    }
     @media screen and (max-width: 568px) {
         .general-filter {
             padding: 30px 20px;
             margin: 10px -10px 0;
             border-radius: 0;
        }
    }
     .wrapped-cols {
         display: flex;
         gap: 20px 8.333vw;
    }
     @media screen and (max-width: 1600px) {
         .wrapped-cols {
             gap: 20px 40px;
        }
    }
     @media screen and (max-width: 1366px) {
         .wrapped-cols {
             flex-wrap: wrap;
        }
    }
     .wrapped-cols .cols {
         width: 54%;
         gap: 30px 0;
         display: flex;
         margin: 0 -20px;
         justify-content: space-between;
    }
     @media screen and (max-width: 1366px) {
         .wrapped-cols .cols {
             flex-wrap: wrap;
             width: 100%;
             justify-content: flex-start;
        }
    }
     @media screen and (max-width: 568px) {
         .wrapped-cols .cols {
             flex-direction: column;
             width: 50%;
        }
    }
     @media screen and (max-width: 1366px) {
         .wrapped-cols .cols.primary .col {
             width: 33.3333%;
        }
    }
     @media screen and (max-width: 568px) {
         .wrapped-cols .cols.primary .col {
             width: 100%;
        }
    }
     .wrapped-cols .cols.second {
         width: 46%;
    }
     @media screen and (max-width: 1366px) {
         .wrapped-cols .cols.second {
             width: 100%;
        }
    }
     @media screen and (max-width: 568px) {
         .wrapped-cols .cols.second {
             width: 50%;
             flex-grow: 0;
             flex-shrink: 0;
        }
    }
     @media screen and (max-width: 1366px) {
         .wrapped-cols .cols.second .col.second {
             order: -1;
        }
    }
     .wrapped-cols .col {
         flex-shrink: 0;
         flex-grow: 0;
         padding: 0 20px;
         max-width: calc(82px + 40px);
         width: 100%;
    }
     @media screen and (max-width: 1366px) {
         .wrapped-cols .col {
             max-width: 100%;
             width: 33.3333%;
        }
    }
     @media screen and (max-width: 568px) {
         .wrapped-cols .col {
             width: 100%;
        }
    }
     .wrapped-cols .col.second {
         flex-shrink: 1;
         flex-grow: 1;
         max-width: calc(328px + 80px);
    }
     @media screen and (max-width: 1366px) {
         .wrapped-cols .col.second {
             max-width: 100%;
             width: 33.33333%;
             flex-grow: 0;
             flex-shrink: 0;
        }
    }
     @media screen and (max-width: 568px) {
         .wrapped-cols .col.second {
             width: 100%;
        }
    }
     .wrapped-cols .title {
         color: var(--color-second);
         font-size: 16px;
         margin-bottom: 15px;
    }
     .wrapped-cols .list {
         display: flex;
         flex-direction: column;
         gap: 10px;
    }
     .wrapped-cols .list.second {
         max-height: 320px;
         -moz-columns: 2;
         columns: 2;
         -moz-column-fill: auto;
         column-fill: auto;
         height: 100%;
         gap: 10px;
         flex-wrap: wrap;
    }
     @media screen and (max-width: 1366px) {
         .wrapped-cols .list.second {
             -moz-columns: 1;
             columns: 1;
             max-height: -moz-fit-content;
             max-height: fit-content;
        }
    }
     .filter-bottom {
         display: flex;
         justify-content: center;
         margin-top: 30px;
    }
     .filter-bottom .group {
         display: flex;
         align-items: center;
         justify-content: center;
         gap: 10px;
         max-width: 386px;
         width: 100%;
    }
     .filter-bottom .box {
         width: 50%;
    }
     .btn-apply, .btn-cancel {
         width: 100%;
         border: none;
         border-radius: 10px;
         display: flex;
         align-items: center;
         justify-content: center;
         font-weight: 500;
         font-size: 14px;
         padding: 12px 10px;
         cursor: pointer;
         transition: color .3s, background .3s;
    }
     .btn-apply {
         text-transform: uppercase;
         color: var(--bg-main);
         background: var(--bg-active);
    }
     @media screen and (min-width: 1025px) {
         .btn-apply:hover {
             background: var(--bg-second-active);
        }
    }
     .btn-cancel {
         color: var(--color-second);
         background: var(--bg-main);
    }
     @media screen and (min-width: 1025px) {
         .btn-cancel:hover {
             background: var(--bg-active);
             color: var(--color-white);
        }
    }
     .checkbox-label {
         display: flex;
         align-items: center;
         cursor: pointer;
    }
    .checkbox-label > span {
        display: contents;
    }
     .checkbox-label .checkbox {
         display: inline-flex;
         vertical-align: top;
         position: relative;
         margin-right: 10px;
         flex-shrink: 0;
         flex-grow: 0;
         width: 20px;
         height: 20px;
         background: var(--bg-main);
         transition: background .2s;
         border-radius: 5px;
    }
     .checkbox-label .checkbox::after {
         content: "";
         position: absolute;
         opacity: 0;
         transition: opacity .2s;
         left: 6px;
         top: 3px;
         width: 7px;
         height: 10px;
         border: solid var(--color-white);
         border-width: 0 2px 2px 0;
         transform: rotate(45deg);
    }
     .checkbox-label span:not(.checkbox) a {
         font-weight: 500;
         font-size: 14px;
         color: var(--color-second);
         display: inline-block;
         vertical-align: top;
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
    }
     .checkbox-input {
         display: none;
    }
     .checkbox-input:checked + .checkbox {
         background: var(--bg-active);
    }
     .checkbox-input:checked + .checkbox::after {
         opacity: 1;
    }
     .checkbox-input:checked + .checkbox + span {
         color: var(--color-main);
    }
     .headline {
         display: flex;
         align-items: center;
         margin-bottom: 15px;
         gap: 10px;
    }
     .headline .title {
         font-weight: 700;
         font-size: 24px;
         flex-grow: 1;
         flex-shrink: 1;
         text-transform: capitalize;
    }
     @media screen and (max-width: 1024px) {
         .headline .title {
             font-size: 22px;
        }
    }
     @media screen and (max-width: 767px) {
         .headline .title {
             font-size: 20px;
        }
    }
     .sort {
         flex-grow: 0;
         flex-shrink: 0;
         display: flex;
         align-items: center;
         gap: 10px;
    }
     .sort .dropped {
         position: relative;
    }
     .sort .dropped.show .drop-hidden {
         opacity: 1;
         transform: translate3d(0, 0, 0);
         visibility: visible;
    }
     .sort .dropped.show .btn {
         border-radius: 10px 10px 0 0;
         color: var(--color-white);
         background: var(--bg-active);
    }
     .sort .dropped.show .btn svg {
         transform: rotate(180deg);
    }
     .sort .dropped .btn {
         display: flex;
         align-items: center;
         gap: 10px;
         border: none;
         background: var(--bg-white);
         border-radius: 10px;
         padding: 10px 20px;
         font-weight: 500;
         font-size: 14px;
         color: var(--color-second);
         cursor: pointer;
         transition: color .3s, background .3s, border-radius .3s;
    }
     @media screen and (min-width: 1025px) {
         .sort .dropped .btn:hover {
             background: var(--bg-active);
             color: var(--color-white);
        }
    }
     .sort .dropped .btn svg {
         font-size: 10px;
         flex-grow: 0;
         flex-shrink: 0;
         transition: transform .3s;
    }
     .drop-hidden {
         position: absolute;
         z-index: 10;
         background: var(--bg-white);
         width: 100%;
         border-radius: 0 0 10px 10px;
         right: 0;
         top: calc(100% + 10px);
         max-height: 110px;
         overflow-y: auto;
         opacity: 0;
         transform: translate3d(0, -10%, 0);
         visibility: hidden;
         transition: opacity .3s, transform .3s, visibility .3s;
    }
     .drop-hidden a {
         padding: 5px 10px;
         display: flex;
         align-items: center;
         font-weight: 500;
         font-size: 14px;
         color: var(--color-second);
         transition: color .3s, background .3s;
    }
     @media screen and (min-width: 1025px) {
         .drop-hidden a:hover {
             background: var(--bg-active);
             color: var(--color-white);
        }
    }
     .main-flex {
         font-size: 0;
         overflow: hidden;
         margin: -10px -5px;
    }
     @media screen and (max-width: 568px) {
         .main-flex {
             margin: -7px -5px;
        }
    }
     .main-flex .item {
         font-size: 16px;
         width: 16.666%;
         display: inline-block;
         vertical-align: top;
         padding: 10px 5px;
    }
     @media screen and (max-width: 1600px) {
         .main-flex .item {
             width: 20%;
        }
    }
     @media screen and (max-width: 1366px) {
         .main-flex .item {
             width: 25%;
        }
    }
     @media screen and (max-width: 1024px) {
         .main-flex .item {
             width: 33.3333%;
        }
    }
     @media screen and (max-width: 568px) {
         .main-flex .item {
             padding: 7px 5px;
             width: 50%;
        }
    }
     .main-flex .item.second {
         width: 33.333%;
         float: left;
         position: relative;
    }
     @media screen and (max-width: 1600px) {
         .main-flex .item.second {
             width: 40%;
        }
    }
     @media screen and (max-width: 1366px) {
         .main-flex .item.second {
             width: 50%;
        }
    }
     @media screen and (max-width: 1024px) {
         .main-flex .item.second {
             width: 33.3333%;
             float: none;
        }
    }
     @media screen and (max-width: 568px) {
         .main-flex .item.second {
             width: 50%;
        }
    }
     .main-flex .item.second .main-card {
         position: relative;
         padding-bottom: 96.447%;
         padding-bottom: 87.447%;
    }
     @media screen and (max-width: 1600px) {
         .main-flex .item.second .main-card {
             padding-bottom: 94%;
             padding-bottom: 88%;
        }
    }
     @media screen and (max-width: 1024px) {
         .main-flex .item.second .main-card {
             padding-bottom: 0;
        }
    }
     .main-flex .item.second .card-media {
         position: absolute;
         top: 0;
         left: 0;
         right: 0;
         bottom: 0;
         padding: 0;
    }
     @media screen and (max-width: 1024px) {
         .main-flex .item.second .card-media {
             position: relative;
             padding-bottom: 74.712%;
        }
    }
     .tags {
         display: flex;
         align-items: center;
         gap: 10px;
         margin-bottom: 10px;
         white-space: nowrap;
         overflow: hidden;
         overflow-x: auto;
    }
     .tags::-webkit-scrollbar {
         display: none;
    }
     @media screen and (max-width: 479px) {
         .tags {
             padding: 0 10px;
             margin: 0 -10px 10px;
        }
    }
     .tags .item {
         display: flex;
         align-items: center;
         gap: 10px;
         padding: 7px 10px;
         border-radius: 10px;
         background: var(--bg-white);
         font-weight: 600;
         font-size: 14px;
         color: var(--color-second);
    }
     .tags svg {
         font-size: 12px;
         flex-grow: 0;
         flex-shrink: 0;
         cursor: pointer;
         transition: color .3s;
    }
     @media screen and (min-width: 1025px) {
         .tags svg:hover {
             color: var(--color-red);
        }
    }
     .main-card {
         color: var(--color-main);
         position: relative;
         transition: color .3s;
         display: block;
    }
     @media screen and (min-width: 1025px) {
         .main-card:hover {
             color: var(--color-active);
        }
         .main-card:hover .img {
             transform: scale(1.02);
        }
    }
     .main-card.second::after {
         position: absolute;
         content: '';
         left: 0;
         right: 0;
         bottom: 0;
         height: 134px;
         width: 100%;
         border-radius: 0 0 10px 10px;
         background: var(--bg-gradient-card);
         z-index: 10;
    }
     @media screen and (max-width: 1024px) {
         .main-card.second::after {
             display: none;
        }
    }
     .main-card.second .card-media {
         border-radius: 10px;
         margin-bottom: 0;
    }
     @media screen and (max-width: 1024px) {
         .main-card.second .card-media {
             padding-bottom: 74.712%;
             border-radius: 5px;
             margin-bottom: 7px;
        }
    }
     .main-card.second .card-content {
         padding: 10px;
         position: absolute;
         z-index: 11;
         left: 0;
         right: 0;
         bottom: 0;
         width: 100%;
    }
     @media screen and (max-width: 1024px) {
         .main-card.second .card-content {
             padding: 0;
             position: static;
        }
    }
     .card-media {
         display: block;
         height: auto;
         width: 100%;
         overflow: hidden;
         position: relative;
         border-radius: 5px;
         padding-bottom: 74.712%;
         margin-bottom: 7px;
    }
     .card-media img {
         position: absolute;
         bottom: 0;
         height: 100%;
         left: 0;
         -o-object-fit: cover;
         object-fit: cover;
         right: 0;
         top: 0;
         transition: .3s;
         width: 100%;
         transform: scale(1);
    }
     .card-content .title {
         display: flex;
         align-items: center;
         gap: 5px;
         font-weight: 500;
         margin-bottom: 4px;
    }
     .card-content .name {
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
    }
     .card-content .flag_holder {
         position: relative;
         width: 16px;
         height: 16px;
         line-height: 0;
         border-radius: 50%;
         overflow: hidden;
    }
     .card-content img {
         width: auto;
         height: 16px;
         -o-object-fit: cover;
         object-fit: cover;
         flex-grow: 0;
         flex-shrink: 0;
         position: absolute;
         top: 0;
         bottom: 0;
         left: 50%;
         transform: translate(-50%);
    }
     .card-content .subtitle {
         color: var(--color-second);
         font-size: 14px;
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
    }
     .wrapper-more {
         display: none;
         align-items: center;
         justify-content: center;
         margin-top: 20px;
    }
     .wrapper-more .more {
         text-align: center;
         cursor: pointer;
         background: var(--bg-white);
         color: var(--color-second);
         border: none;
         max-width: 267px;
         width: 100%;
         padding: 10px;
         border-radius: 10px;
         transition: color .3s, background .3s;
    }
     @media screen and (min-width: 1025px) {
         .wrapper-more .more:hover {
             background: var(--color-active);
             color: var(--color-white);
        }
    }
     .general-description {
         margin-top: 30px;
         font-size: 14px;
         line-height: 1.4;
         color: var(--color-second);
    }
     .about-model {
         display: flex;
         align-items: center;
         flex-wrap: wrap;
         gap: 10px;
         margin-bottom: 10px;
            justify-content: space-between; 
    }
     @media screen and (max-width: 1024px) {
         .about-model {
             justify-content: space-between;
        }
    }
     @media screen and (max-width: 1024px) {
         .about-model .col:not(.second) {
             width: calc(50% - 5px);
        }
    }
    .about-model .col.second.coltags {
    display: grid;
    grid-template-columns: auto auto;
height: 41px;
overflow-y: clip;
align-items: flex-start;
}
.about-model .col.second.coltags.visible {
    overflow-y: auto;
    height: auto;
}
     .about-model .col,
     .about-model .col.second .alltags {
         display: flex;
         align-items: center;
         flex-grow: 0;
         flex-shrink: 0;
         gap: 10px;
    }
     .about-model .col.second,
     .about-model .col.second .alltags {
         flex-grow: 1;
         flex-shrink: 1;
         flex-wrap: wrap;
    }
     @media screen and (max-width: 1024px) {
         .about-model .col.second,
         .about-model .col.second .alltags {    
             width: 100%;
             order: 0;
             gap: 3px;
        }
    }
     @media screen and (max-width: 479px) {
         .about-model .col.second,
         .about-model .col.second .alltags {
             justify-content: flex-start;
             gap: 5px;
        }
    }
     @media screen and (max-width: 1024px) {
         .about-model .col.indent {
             justify-content: flex-end;
        }
    }
     @media screen and (min-width: 1025px) {
         .about-model a.author:hover {
             color: var(--color-active);
        }
    }
     .about-model .author {
         display: flex;
         align-items: center;
         color: var(--color-main);
         font-weight: 600;
         font-size: 14px;
         transition: color .3s;
    }
     .about-model .model {
         flex-grow: 0;
         flex-shrink: 0;
         width: 30px;
         height: 30px;
         max-width: 100%;
         -o-object-fit: cover;
         object-fit: cover;
         overflow: hidden;
         border-radius: 100%;
         margin-right: 10px;
    }
     .about-model .flag_holder {
         position: relative;
         border-radius: 50%;
         width: 14px;
         height: 14px;
         overflow: hidden;
         line-height: 0;
         margin-left: 5px;
    }
     .about-model .flag {
		padding-left: 5px;
         height: 14px;
         width: auto;
         -o-object-fit: cover;
         object-fit: cover;
    }
     .about-model .name {
         font-weight: 600;
         font-size: 14px;
    }
     @media screen and (max-width: 410px) {
         .about-model .item {
             width: auto;
        }
    }
     .about-model .link {
         display: flex;
         align-items: center;
         justify-content: center;
         gap: 10px;
         font-weight: 600;
         font-size: 14px;
         color: var(--color-main);
         padding: 12px 20px;
         border-radius: 10px;
         background: var(--color-white);
         transition: background .3s, color .3s;
    }
     @media screen and (min-width: 1025px) {
         .about-model .link:hover {
             color: var(--color-white);
             background: var(--bg-active);
        }
         .about-model .link:hover .second {
             color: var(--color-white);
        }
    }
     @media screen and (max-width: 410px) {
         .about-model .link {
             padding: 13px 15px;
             font-size: 12px;
             width: 100%;
             gap: 5px;
        }
    }
     .about-model .link span {
         white-space: nowrap;
   text-overflow: ellipsis;
  display: inline-block;
  overflow: hidden;
   }
     .about-model .link .second {
         color: var(--color-second);
         transition: color .3s;
    }
     .link-next {
         display: flex;
         align-items: center;
         gap: 10px;
         font-weight: 600;
         font-size: 14px;
         background: var(--bg-white);
         color: var(--color-main);
         border-radius: 10px;
         border: none;
         cursor: pointer;
         padding: 12px 20px;
         transition: color .3s, background .3s;
    }
     @media screen and (min-width: 1025px) {
         .link-next:hover {
             color: var(--color-white);
             background: var(--bg-active);
        }
    }
     @media screen and (max-width: 410px) {
         .link-next {
             padding: 13px 15px;
             font-size: 12px;
             gap: 5px;
        }
    }
     .link-next svg {
         font-size: 10px;
         flex-grow: 0;
         flex-shrink: 0;
    }
     .video-field {
         position: relative;
         padding-bottom: 48.744%;
         border-radius: 10px;
         overflow: hidden;
    }
     @media screen and (max-width: 767px) {
         .video-field {
             margin: 0;
             border-radius: 0;
        }
    }
     @media screen and (max-width: 479px) {
         .video-field {
             padding-bottom: 0;
             min-height: 230px;
        }
    }
    
    .loader-icon {
         position: absolute;
         width: 50% !important;
         height: 50% !important; 
         filter: none;
            -webkit-filter: none;
            transition: none;
            z-index: 2;
    }
    .center-abs {
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
}
.stream.loaded .video-field{display: none;}
 .video-field .media {
         position: absolute;
         top: 0;
         left: 0;
         right: 0;
         bottom: 0;
         width: 100%;
         height: 100%;
         -o-object-fit: cover;
         object-fit: cover;


    }
    .video-field .media img{
        
  filter: blur(12px);
  -webkit-filter: blur(12px);
  transition: filter .35s; 
    }
     .video-field .label {
         position: absolute;
         right: 20px;
         bottom: 20px;
         max-width: 138px;
         width: 100%;
         height: auto;
         z-index: 2;
    }
     @media screen and (max-width: 767px) {
         .video-field .label {
             display: none;
        }
    }
     .play-video {
         position: absolute;
         z-index: 3;
         top: 50%;
         left: 50%;
         transform: translate3d(-50%, -50%, 0) scale(1);
         width: 120px;
         height: 120px;
         background: rgba(var(--color-dark), 0.6);
         color: var(--color-white);
         font-size: 44px;
         border-radius: 100%;
         display: flex;
         align-items: center;
         justify-content: center;
         transition: transform .3s;
         -webkit-backdrop-filter: blur(10px);
         backdrop-filter: blur(10px);
         border: none;
         cursor: pointer;
    }
     @media screen and (min-width: 1025px) {
         .play-video:hover {
             transform: translate3d(-50%, -50%, 0) scale(1.05);
        }
    }
     @media screen and (max-width: 1366px) {
         .play-video {
             width: 100px;
             height: 100px;
             font-size: 35px;
        }
    }
     @media screen and (max-width: 767px) {
         .play-video {
             width: 60px;
             height: 60px;
             font-size: 22px;
        }
    }
     .tools-video {
         display: flex;
         align-items: center;
         padding: 10px;
         gap: 10px;
         border-radius: 0 0 10px 10px;
         background: var(--color-white);
    }
     @media screen and (max-width: 1024px) {
         .tools-video {
             flex-direction: column;
             justify-content: space-between;
        }
    }
     @media screen and (max-width: 767px) {
         .tools-video {
             margin: 0 -10px;
        }
    }
     .tools-video .col {
         flex-grow: 1;
         flex-shrink: 1;
         display: flex;
         align-items: center;
         justify-content: space-between;
         gap: 10px;
    }
     @media screen and (max-width: 1024px) {
         .tools-video .col {
             width: 100%;
        }
    }
     .tools-video .col.second {
         flex-grow: 0;
         flex-shrink: 0;
    }
     @media screen and (max-width: 1024px) {
         .tools-video .col.second {
             flex-grow: 1;
             flex-shrink: 1;
        }
    }
     @media screen and (max-width: 479px) {
         .tools-video .col.second .item {
             width: 50%;
        }
    }
     @media screen and (max-width: 479px) {
         .tools-video .item {
             width: 50%;
        }
    }
     .tools-video .btn {
         display: flex;
         align-items: center;
         justify-content: center;
         font-weight: 500;
         font-size: 16px;
         padding: 10px 20px;
         border: none;
         cursor: pointer;
         background: var(--bg-main);
         border-radius: 10px;
         gap: 10px;
         color: var(--color-main);
         transition: color .3s, background .3s;
    }
     @media screen and (min-width: 1025px) {
         .tools-video .btn:hover {
             background: var(--bg-active);
             color: var(--color-white);
             --color-coin:#fff;
        }
    }
     @media screen and (max-width: 410px) {
         .tools-video .btn {
             padding: 12px 15px;
             font-size: 13px;
             width: 100%;
             gap: 5px;
        }
    }
     .tools-video .btn.second {
         background: var(--bg-green);
         color: var(--color-white);
    }
     @media screen and (min-width: 1025px) {
         .tools-video .btn.second:hover {
             background: var(--bg-light-green);
        }
    }
     .tools-video svg {
         flex-grow: 0;
         flex-shrink: 0;
    }
     @media screen and (max-width: 410px) {
         .tools-video svg {
             width: 14px;
             height: 14px;
        }
    }
     .tools-video svg path {
         transition: fill .3s;
    }
     .tools-video .svg-icon {
         font-size: 18px;
    }
     @media screen and (max-width: 410px) {
         .tools-video .svg-icon {
             font-size: 14px;
        }
    }
     .favorite-btn {
         display: flex;
         align-items: center;
         gap: 10px;
         cursor: pointer;
         border: none;
         background: var(--bg-main);
         color: var(--color-main);
         font-weight: 600;
         font-size: 14px;
         padding: 10px 20px;
         border-radius: 10px;
         transition: color .3s, background .3s;
    }
     @media screen and (min-width: 1025px) {
         .favorite-btn:hover,
         .favorite-btn.active {
             background: var(--bg-active);
             color: var(--color-white);
        }
    }
     @media screen and (max-width: 410px) {
         .favorite-btn {
             padding: 13px 15px;
             font-size: 12px;
             gap: 5px;
        }
    }
     .favorite-btn.active {
         background: var(--bg-active);
         color: var(--color-white);
    }
     .favorite-btn svg {
         font-size: 20px;
         flex-grow: 0;
         flex-shrink: 0;
    }
     .footer {
         background-color: var(--bg-dark-blue);
         flex-shrink: 0;
         flex-grow: 0;
         padding: 30px 20px;
    }
     @media screen and (max-width: 767px) {
         .footer {
             padding: 20px;
        }
    }
     .footer-logo {
         margin-bottom: 18px;
    }
     .footer-logo img {
         max-width: 100%;
    }
     .footer-detail, .footer-text {
         font-size: 14px;
    }
     .footer-detail {
         line-height: 1.4;
         color: var(--color-white);
         margin-bottom: 18px;
    }
     .footer-text {
         color: var(--color-second);
    }
     .mask {
         backdrop-filter: blur(5px);
         background: rgba(var(--bg-mask), 0.7);
         -webkit-backdrop-filter: blur(5px);
         position: fixed;
         bottom: 0;
         left: 0;
         opacity: 0;
         right: 0;
         top: var(--header-height);
         transition: transform .3s, visibility .3s, opacity .3s;
         visibility: hidden;
         z-index: 2;
    }
     .custom_list_webcams_tags {
         margin-top: 30px;
    }
     @media (max-width: 1024px) {
         .custom_list_webcams_tags {
             margin-top: 20px;
        }
    }
     .category-wrap {
         margin-bottom: 30px;
    }
     .thumbs__subtitle {
         font-weight: 600;
         font-size: 20px;
         display: inline-block;
         margin-bottom: 26px;
         color: #000;
    }
     @media (max-width: 1024px) {
         .thumbs__subtitle {
             margin-bottom: 10px;
        }
    }
     .category-list-holder {
         display: grid;
         grid-template-columns: repeat(4, 1fr);
         margin: 0 -15px 30px;
    }
     @media (min-width: 1200px) and (max-width: 1500px) {
         .category-list-holder.all {
             grid-template-columns: repeat(5, 1fr);
        }
    }
     @media (max-width: 1200px) {
         .category-list-holder {
             grid-template-columns: repeat(4, 1fr);
        }
    }
     @media (max-width: 840px) {
         .category-list-holder {
             grid-template-columns: repeat(3, 1fr);
        }
    }
     @media (max-width: 600px) {
         .category-list-holder {
             grid-template-columns: repeat(2, 1fr);
        }
    }
     @media (max-width: 400px) {
         .category-list-holder {
             grid-template-columns: repeat(1, 1fr);
        }
    }
     .category-col {
         padding: 0 15px;
    }
     .category-col.col-2 {
         grid-column: span 2;
    }
     .category-col.col-4 {
         grid-column: span 4;
    }
     .category-col.col-5 {
         grid-column: span 5;
    }
     .category-col.col-2 .category-list-inner {
         display: flex;
         flex-wrap: wrap;
    }
     .category-col.col-5 .category-list-inner, .category-col.col-4 .category-list-inner {
         display: flex;
         flex-wrap: wrap;
    }
     .category-col.col-2 .category-list-item {
         width: 50%;
    }
     .category-col.col-5 .category-list-item {
         width: 20%;
    }
     .category-col.col-4 .category-list-item {
         width: 25%;
    }
     .category-list-title {
         display: block;
         padding: 12px 20px;
         text-align: start;
         background: var(--bg-dark-blue);
         border-radius: 50px;
         text-transform: uppercase;
         font-weight: 600;
         font-size: 14px;
         color: #fff;
    }
     .model-filter-link {
         display: flex;
         justify-content: space-between;
         align-items: center;
         padding: 10px;
         color: #000;
         position: relative;
         transition: color .3s;
    }
     .model-filter-link::before {
         position: absolute;
         content: '';
         left: 0;
         right: 0;
         bottom: 0;
         background: var(--color-active);
         width: 0;
         height: 1px;
         transition: width .3s;
    }
     .model-filter-link .model-filter-count {
         color: var(--color-active);
    }
     @media screen and (min-width: 1025px) {
         .model-filter-link:hover {
             color: var(--color-active);
        }
         .model-filter-link:hover::before {
             width: 100%;
        }
    }
     @media (max-width: 1500px) {
         .category-col.col-5 {
             grid-column: span 4;
        }
         .category-col.col-5 .category-list-item {
             width: 25%;
        }
    }
     @media (max-width: 1200px) {
         .category-list-holder {
             grid-template-columns: repeat(4,1fr);
        }
         .category-col.col-4, .category-col.col-5 {
             grid-column: span 3;
        }
         .category-col.col-4 .category-list-item, .category-col.col-5 .category-list-item {
             width: 33.33%;
        }
    }
     @media (max-width: 840px) {
         .category-list-holder {
             grid-template-columns: repeat(3,1fr);
        }
         .category-col.col-4, .category-col.col-5 {
             grid-column: span 2;
        }
         .category-col.col-4 .category-list-item, .category-col.col-5 .category-list-item {
             width: 50%;
        }
    }
     @media (max-width: 400px) {
         .category-list-holder {
             grid-template-columns: repeat(1,1fr);
        }
         .category-col.col-2 {
             grid-column: span 1;
        }
         .category-col.col-2 .category-list-item {
             width: 100%;
        }
         .category-col.col-4, .category-col.col-5 {
             grid-column: span 1;
        }
         .category-col.col-4 .category-list-item, .category-col.col-5 .category-list-item {
             width: 100%;
        }
    }
     .categories__alphabet {
         margin-bottom: 25px;
    }
     @media (max-width: 1366px) {
         .categories__alphabet {
             padding: 0 15px;
        }
    }
     @media (max-width: 1023px) {
         .categories__alphabet {
             overflow: hidden;
             overflow-x: auto;
        }
    }
     .categories__alphabet-inner {
         display: -webkit-box;
         display: -ms-flexbox;
         display: flex;
         -webkit-box-align: center;
         -ms-flex-align: center;
         align-items: center;
         -ms-flex-wrap: wrap;
         flex-wrap: wrap;
    }
     @media (max-width: 1023px) {
         .categories__alphabet-inner {
             -ms-flex-wrap: nowrap;
             flex-wrap: nowrap;
        }
    }
     .categories__alphabet-item {
         padding: 0 4px 5px 0;
    }
     .categories__alphabet-item a {
         line-height: 1;
         display: -webkit-box;
         display: -ms-flexbox;
         display: flex;
         width: 40px;
         height: 40px;
         padding: 10px 15px;
         border-radius: 20px;
         -webkit-box-align: center;
         -ms-flex-align: center;
         align-items: center;
         -webkit-box-pack: center;
         -ms-flex-pack: center;
         justify-content: center;
         color: var(--color-main);
         background: var(--bg-top-aside);
        ;
         transition: color .3s, .3s background;
    }
     @media (min-width: 1025px) {
         .categories__alphabet-item a:hover {
             color: var(--color-white);
             background: var(--bg-active);
        }
    }
     .categories__alphabet-item a.active {
         color: var(--color-white);
         background: var(--bg-active);
    }
     .categories__alphabet-item.all a {
         width: auto;
         padding: 10px 20px;
    }
     .categories__box {
         margin-bottom: 30px;
         padding-bottom: 20px;
         border-bottom: 1px solid var(--bg-active);
    }
     .categories__box-title {
         font-size: 24px;
         font-weight: 500;
         line-height: 1;
         margin-bottom: 5px;
         padding: 0 20px;
         text-transform: uppercase;
         color: var(--bg-dark-blue);
    }
     @media (max-width: 579px) {
         .categories__box-title {
             padding: 0;
        }
    }
     .categories__box-row {
         display: -webkit-box;
         display: -ms-flexbox;
         display: flex;
         margin: 0 -10px;
         -ms-flex-wrap: wrap;
         flex-wrap: wrap;
    }
     @media (max-width: 579px) {
         .categories__box-row {
             margin: 0 -5px;
        }
    }
     .categories__box-col {
         width: 20%;
         padding: 0 10px;
    }
     @media (max-width: 1023px) {
         .categories__box-col {
             width: 25%;
        }
    }
     @media (max-width: 767px) {
         .categories__box-col {
             width: 33.333%;
        }
    }
     @media (max-width: 579px) {
         .categories__box-col {
             width: 50%;
             padding: 0 5px;
        }
    }
     .categories__box-item a {
         line-height: 1;
         display: -webkit-inline-box;
         display: -ms-inline-flexbox;
         display: inline-flex;
         padding: 10px 20px;
         color: #000;
         border-radius: 18px;
         transition: background .3s, color .3s;
    }
     @media (min-width: 1025px) {
         .categories__box-item a:hover {
             background: var(--bg-active);
             color: var(--color-white);
        }
    }
     @media (max-width: 579px) {
         .categories__box-item a {
             padding: 10px 0;
        }
    }
     audio::-webkit-media-controls-timeline, video::-webkit-media-controls-timeline {
         display: none;
    }
     video::-webkit-media-controls-current-time-display, video::-webkit-media-controls-time-remaining-display {
         display: none;
    }
     .autocomplete-suggestions {
         background: var(--bg-darkness-blue)!important;
         border-radius: 20px!important;
         color: var(--bg-top-aside);
         cursor: pointer;
         overflow-y: auto;
    }
     .autocomplete-suggestion {
         padding: 10px 20px!important;
    }
     .autocomplete-suggestion.autocomplete-selected {
         color: #ffffff!important;
    }
     @import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;
    1,100..900&display=swap");
     body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, button, input, p, blockquote, th, td {
         margin: 0;
         padding: 0;
    }
     fieldset, img {
         border: 0;
    }
     img, object, embed {
         vertical-align: bottom;
    }
     address, caption, cite, code, dfn, em, th, var {
         font-style: normal;
         font-weight: normal;
    }
     ol, ul {
         list-style: none;
    }
     caption, th {
         text-align: left;
    }
     h1, h2, h3, h4, h5, h6 {
         font-size: 100%;
    }
     q:before, q:after {
         content: '';
    }
     a * {
         cursor: pointer;
    }
     input, textarea {
         outline: none;
    }
     :root {
         --font-size-general: 16px;
         --line-height-general: 1.2;
         --default-font: 'Roboto', sans-serif;
         --color-main: #000;
         --color-dark: 0, 0, 0;
         --color-second: #787889;
         --color-active: #332B9F;
         --color-white: #fff;
         --color-green: #00BD62;
         --color-coin: #000;
         --color-red: rgb(173, 6, 6);
         --bg-main: #eeedf2;
         --bg-white: #fff;
         --bg-active: #332B9F;
         --bg-second-active: #3428d6;
         --bg-gradient-card: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #fff 100%);
         --bg-mask: 238, 237, 242;
         --bg-top-aside: #d4d1df;
         --bg-dark-blue: #1d176c;
         --bg-darkness-blue: #050049;
         --bg-green: #00bd62;
         --bg-light-green: #02a958;
         --header-height: 60px;
         --aside-width: 228px;
    }
     html {
         height: 100%;
         min-width: 320px;
         -webkit-text-size-adjust: 100%;
         -ms-text-size-adjust: 100%;
    }
     body {
         font: var(--font-size-general)/var(--line-height-general) var(--default-font);
         font-weight: 400;
         height: 100%;
         min-width: 320px;
         position: relative;
         color: var(--color-main);
         background: var(--bg-main);
    }
     @media screen and (max-width: 767px) {
         body.open-menu .mask {
             opacity: 1;
             transform: translate3d(0, 0, 0);
             visibility: visible;
        }
         body.open-menu .aside-box {
             transform: translate3d(0, 0, 0);
             opacity: 1;
             visibility: visible;
        }
         body.open-menu .hamburger::before, body.open-menu .hamburger::after {
             top: 50%;
             left: 50%;
             width: 26px;
        }
         body.open-menu .hamburger::before {
             transform: rotate(45deg) translate3d(-50%, -50%, 0);
        }
         body.open-menu .hamburger::after {
             transform: rotate(-45deg) translate3d(-50%, -50%, 0);
        }
         body.open-menu .hamburger span {
             opacity: 0;
             transform: translate3d(-20px, -50%, 0);
             visibility: hidden;
        }
    }
     @media screen and (max-width: 767px) {
         body.scroll-locked {
             height: 100%;
             overflow: hidden;
             position: fixed;
             width: 100%;
        }
    }
     @media screen and (max-width: 767px) {
         body.show-search .search {
             top: 50%;
             visibility: visible;
             opacity: 1;
        }
         body.show-search .search-icon {
             display: none;
        }
         body.show-search .close-icon {
             display: block;
        }
    }
     a {
         color: #2600ff;
         text-decoration: none;
    }
     input {
         outline: none;
         -webkit-appearance: none;
         border-radius: 0;
    }
     input, textarea, button {
         font-family: inherit;
         font-weight: inherit;
         font-size: inherit;
    }
     * {
         box-sizing: border-box;
         outline: none;
    }
     *:before, *:after {
         box-sizing: border-box;
    }
     * ::-moz-selection {
         background: #2600ff;
         color: #fff;
    }
     * ::selection {
         background: #2600ff;
         color: #fff;
    }
     .svg-icon {
         display: inline-block;
         vertical-align: top;
         width: 1em;
         height: 1em;
         fill: currentColor;
    }
     input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
         color: #787889;
    }
     input:-moz-placeholder, textarea:-moz-placeholder {
         color: #787889;
         opacity: 1;
    }
     input::-moz-placeholder, textarea::-moz-placeholder {
         color: #787889;
         opacity: 1;
    }
     input:-ms-input-placeholder, textarea:-ms-input-placeholder {
         color: #787889;
    }
     input:focus::-webkit-input-placeholder, textarea:focus::-webkit-input-placeholder {
         color: transparent;
    }
     input:focus:-moz-placeholder, textarea:focus:-moz-placeholder {
         color: transparent;
    }
     input:focus::-moz-placeholder, textarea:focus::-moz-placeholder {
         color: transparent;
    }
     input:focus:-ms-input-placeholder, textarea:focus:-ms-input-placeholder {
         color: transparent;
    }
     input.placeholder, textarea.placeholder {
         color: #787889 !important;
    }
     .wrapper {
         display: flex;
         flex-direction: column;
         min-height: 100vh;
    }
     .container {
         max-width: 1692px;
         width: 100%;
         margin: 0 auto;
         padding: 0 50px;
    }
     @media screen and (max-width: 1366px) {
         .container {
             padding: 0 20px;
        }
    }
     @media screen and (max-width: 1024px) {
         .container {
             padding: 0 10px;
        }
    }
     .header {
         background-color: var(--bg-dark-blue);
         padding: 10px 20px;
         flex-shrink: 0;
         flex-grow: 0;
         display: flex;
         gap: 0 50px;
    }
     @media screen and (max-width: 1280px) {
         .header {
             gap: 0 10px;
        }
    }
     @media screen and (max-width: 1024px) {
         .header {
             padding: 20px 10px;
        }
    }
     @media screen and (max-width: 767px) {
         .header {
             position: relative;
             justify-content: space-between;
        }
    }
     .hamburger {
         display: none;
         cursor: pointer;
         align-items: center;
         align-self: center;
         height: 20px;
         position: relative;
         z-index: 2;
         width: 20px;
         opacity: 1;
         background: none;
         border: none;
         transform: translateZ(0);
         transition: opacity 0.3s, visibility 0.3s, transform 0.3s;
         visibility: visible;
         flex-grow: 0;
         flex-shrink: 0;
    }
     .hamburger::after, .hamburger::before, .hamburger span {
         content: "";
         height: 3px;
         position: absolute;
         left: 0;
         right: 0;
         border-radius: 10px;
         background-color: var(--bg-white);
         transform-origin: top left;
         transition: background-color 0.3s, transform 0.3s;
    }
     .hamburger::before, .hamburger::after {
         transform: translate3d(0, 0, 0) rotate(0);
         left: auto;
         width: 100%;
    }
     .hamburger::before {
         top: 0;
         bottom: auto;
    }
     .hamburger::after {
         top: auto;
         bottom: 0;
    }
     .hamburger span {
         top: 50%;
         opacity: 1;
         visibility: visible;
         transform: translate3d(0, -50%, 0) rotate(0);
         transition: background-color 0.2s, opacity 0.2s, visibility 0.2s, transform 0.2s;
    }
     @media screen and (max-width: 767px) {
         .hamburger {
             display: flex;
        }
    }
     .logo {
         flex-grow: 0;
         flex-shrink: 0;
         height: 100%;
         align-self: center;
         width: 100%;
         max-width: calc(var(--aside-width) - 20px);
    }
     .logo img {
         max-width: 100%;
    }
     .header-nav {
         display: flex;
         align-items: center;
         flex-grow: 0;
         flex-shrink: 0;
         gap: 10px;
    }
     @media screen and (max-width: 1280px) {
         .header-nav {
             gap: 5px;
        }
    }
     @media screen and (max-width: 1024px) {
         .header-nav {
             display: none;
        }
    }
     .header-nav li.active a {
         background: var(--bg-active);
    }
     .header-nav a {
         display: flex;
         align-items: center;
         color: var(--color-white);
         font-weight: 500;
         font-size: 14px;
         gap: 6px;
         text-transform: uppercase;
         padding: 10px 20px;
         border-radius: 10px;
         transition: background .3s;
    }
     @media screen and (min-width: 1025px) {
         .header-nav a:hover {
             background: var(--bg-darkness-blue);
        }
    }
     @media screen and (max-width: 1280px) {
         .header-nav a {
             padding: 10px 15px;
             font-size: 12px;
        }
    }
     .header-nav svg {
         font-size: 20px;
         flex-grow: 0;
         flex-shrink: 0;
    }
     @media screen and (max-width: 1280px) {
         .header-nav svg {
             font-size: 18px;
        }
    }
     .search {
         flex-shrink: 1;
         flex-grow: 1;
         display: flex;
         justify-content: center;
    }
     @media screen and (max-width: 767px) {
         .search {
             position: absolute;
             right: 0;
             padding: 0 44px 0 10px;
             top: 80%;
             left: 0;
             z-index: 3;
             opacity: 0;
             visibility: hidden;
             transition: opacity .3s, visibility .3s, top .3s;
             transform: translate3d(0, -50%, 0);
        }
    }
     .wrap-input {
         background-color: var(--bg-darkness-blue);
         display: flex;
         height: 100%;
         width: 100%;
         max-width: 580px;
         border-radius: 10px;
         height: 40px;
    }
     @media screen and (max-width: 1024px) {
         .wrap-input {
             max-width: 100%;
        }
    }
     .wrap-input .input {
         background: none;
         border: none;
         width: 100%;
         height: 100%;
         font-family: "Roboto", sans-serif;
         font-weight: 400;
         font-size: 14px;
         color: var(--color-white);
         padding-left: 20px;
    }
     .wrap-input .btn {
         flex-shrink: 0;
         flex-grow: 0;
         font-size: 20px;
         color: var(--color-white);
         background: none;
         border: none;
         cursor: pointer;
         height: 100%;
         width: 60px;
         display: flex;
         align-items: center;
         justify-content: center;
         transform: scale(1);
         transition: transform .3s;
    }
     @media screen and (min-width: 1025px) {
         .wrap-input .btn:hover {
             transform: scale(1.05);
        }
    }
     .action-search {
         display: none;
         align-items: center;
         justify-content: center;
         font-size: 24px;
         color: var(--color-white);
         background: none;
         border: none;
         cursor: pointer;
         position: relative;
         z-index: 5;
    }
     @media screen and (max-width: 767px) {
         .action-search {
             display: flex;
        }
    }
     .action-search .close-icon {
         display: none;
    }
     .panel-auth {
         display: flex;
         gap: 10px;
         font-weight: 600;
         font-size: 14px;
         flex-shrink: 0;
         flex-grow: 0;
    }
     @media screen and (max-width: 1024px) {
         .panel-auth {
             display: none;
        }
    }
     .panel-auth .btn {
         background: none;
         border: none;
         cursor: pointer;
         background-color: var(--bg-active);
         color: var(--color-white);
         padding: 10px 15px;
         border-radius: 10px;
         display: flex;
         align-items: center;
         transition: background .3s;
    }
     @media screen and (min-width: 1025px) {
         .panel-auth .btn:hover {
             background: var(--bg-darkness-blue);
        }
    }
     .panel-auth .btn.second {
         background-color: var(--bg-green);
    }
     @media screen and (min-width: 1025px) {
         .panel-auth .btn.second:hover {
             background: var(--bg-light-green);
        }
    }
     .main {
         flex-shrink: 1;
         flex-grow: 1;
         position: relative;
         padding: 20px 0 30px var(--aside-width);
    }
     @media screen and (max-width: 767px) {
         .main {
             padding: 10px 0 30px;
        }
    }
     .section {
         margin-bottom: 30px;
    }
     .section:last-child {
         margin-bottom: 0;
    }
     .aside-box {
         position: absolute;
         top: 0;
         left: 0;
         bottom: 0;
         width: var(--aside-width);
         z-index: 100;
         z-index: 5;
         background: var(--bg-white);
         transition: transform .3s, opacity .3s, visibility .3s;
         display: flex;
         flex-direction: column;
         padding-bottom: 20px;
    }
     @media screen and (max-width: 767px) {
         .aside-box {
             position: fixed;
             height: calc(100svh - var(--header-height));
             top: var(--header-height);
             opacity: 0;
             visibility: hidden;
             transform: translate3d(-50%, 0, 0);
             padding: 0;
        }
    }
     .aside-box .hold {
         display: flex;
         flex-direction: column;
         height: 100%;
         width: 100%;
         overflow: auto;
         padding: 0 20px;
    }
     .aside-box .row {
         margin-bottom: 30px;
         padding-bottom: 25px;
         border-bottom: 1px solid var(--bg-main);
    }
     .aside-box .row:last-child {
         margin-bottom: 0;
         padding-bottom: 0;
         border-bottom: none;
    }
     .aside-box .row:first-child {
         padding-bottom: 30px;
    }
     .aside-box .title {
         text-transform: uppercase;
         margin-bottom: 20px;
         font-weight: 500;
         color: var(--color-second);
    }
     .top-box {
         font-size: 24px;
         font-weight: 300;
         display: flex;
         align-items: center;
         gap: 10px;
         padding: 11px 20px;
         margin: -10px -20px 0;
         background: var(--bg-top-aside);
         margin-bottom: 5px;
    }
     @media screen and (max-width: 1024px) {
         .top-box {
             margin-bottom: 20px;
        }
    }
     .top-box strong {
         font-weight: 900;
    }
     .top-box .circle {
         background: var(--color-green);
         width: 12px;
         height: 12px;
         border-radius: 100%;
         flex-grow: 0;
         flex-shrink: 0;
    }
     .group-auth-tools {
         display: none;
         margin-bottom: 15px;
         font-weight: 600;
         font-size: 14px;
    }
     @media screen and (max-width: 1024px) {
         .group-auth-tools {
             display: block;
        }
    }
     .group-auth-tools .item {
         margin-bottom: 10px;
    }
     .group-auth-tools .item:last-child {
         margin-bottom: 0;
    }
     .group-auth-tools .btn {
         background: none;
         border: none;
         cursor: pointer;
         background-color: var(--bg-active);
         color: var(--color-white);
         padding: 12px 15px;
         border-radius: 10px;
         display: flex;
         align-items: center;
         justify-content: center;
    }
     .group-auth-tools .btn.second {
         background-color: var(--bg-green);
    }
     .general-list {
         margin: 0 -10px;
    }
     .general-list li {
         margin-bottom: 10px;
    }
     .general-list li:last-child {
         margin-bottom: 0;
    }
     .general-list .link {
         padding: 5px 10px;
         display: flex;
         align-items: center;
         gap: 10px;
         font-weight: 500;
         font-size: 14px;
         color: var(--color-main);
         border-radius: 5px;
         transition: background .3s;
    }
     @media screen and (min-width: 1025px) {
         .general-list .link:hover {
             background: var(--bg-main);
        }
    }
     .general-list svg {
         font-size: 20px;
         flex-grow: 0;
         flex-shrink: 0;
    }
     .categories-list li {
         margin-bottom: 5px;
    }
     .categories-list li:last-child {
         margin-bottom: 0;
    }
     .categories-list a {
         display: flex;
         align-items: center;
         gap: 5px;
         padding: 5px 0;
         font-size: 14px;
         color: var(--color-main);
         transition: color .3s;
         position: relative;
    }
     @media screen and (min-width: 1025px) {
         .categories-list a:hover {
             color: var(--color-active);
        }
         .categories-list a:hover::before {
             width: 100%;
        }
         .categories-list a:hover span:last-child {
             color: var(--color-main);
        }
    }
     .categories-list a::before {
         position: absolute;
         content: '';
         left: 0;
         right: 0;
         bottom: 0;
         background: var(--color-active);
         width: 0;
         height: 1px;
         transition: width .3s;
    }
     .categories-list a span:first-child {
         flex-grow: 1;
         flex-shrink: 1;
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
    }
     .categories-list a span:last-child {
         flex-grow: 0;
         flex-shrink: 0;
         color: var(--color-second);
         transition: color .3s;
    }
     .show-all {
         margin-top: 30px;
         text-align: center;
         display: block;
         color: var(--color-second);
         font-weight: 500;
         font-size: 14px;
         padding: 12px;
         background: var(--bg-main);
         text-transform: uppercase;
         border-radius: 10px;
         transition: color .3s, background .3s;
    }
     @media screen and (min-width: 1025px) {
         .show-all:hover {
             color: var(--color-white);
             background: var(--color-active);
        }
    }
     .sort-box {
         display: flex;
         align-items: center;
         justify-content: center;
         gap: 20px;
    }
     @media screen and (max-width: 410px) {
         .sort-box {
             gap: 10px;
             flex-wrap: wrap;
        }
    }
     .sort-box .wrap {
         display: flex;
         align-items: center;
         gap: 10px;
    }
     @media screen and (max-width: 410px) {
         .sort-box .wrap {
             gap: 5px;
        }
    }
     .sort-box .link {
         display: block;
         font-weight: 500;
         font-size: 14px;
         text-transform: uppercase;
         color: var(--color-second);
         background: var(--bg-white);
         padding: 10px 20px;
         border-radius: 10px;
         border: none;
         cursor: pointer;
         transition: color .3s, background .3s, padding .3s;
         position: relative;
    }
     @media screen and (min-width: 1025px) {
         .sort-box .link:hover {
             color: var(--color-white);
             background: var(--bg-active);
        }
    }
     @media screen and (max-width: 767px) {
         .sort-box .link {
             padding: 10px 15px;
        }
    }
     @media screen and (max-width: 410px) {
         .sort-box .link {
             font-size: 12px;
             padding: 11px 15px;
        }
    }
     .sort-box .link::before {
         position: absolute;
         content: '';
         left: 20px;
         top: 50%;
         transform: translate3d(0, -50%, 0);
         width: 0px;
         height: 8px;
         background: var(--color-white);
         border-radius: 100%;
         transition: width .3s;
    }
     @media screen and (max-width: 767px) {
         .sort-box .link::before {
             left: 15px;
        }
    }
     .sort-box .link.active {
         color: var(--color-white);
         padding-left: 33px;
         background: var(--bg-active);
    }
     @media screen and (max-width: 767px) {
         .sort-box .link.active {
             padding-left: 28px;
        }
    }
     .sort-box .link.active::before {
         width: 8px;
    }
     .filter-btn {
         cursor: pointer;
         display: flex;
         align-items: center;
         color: var(--color-active);
         font-size: 24px;
         border: none;
         background: none;
         flex-grow: 0;
         flex-shrink: 0;
    }
     @media screen and (min-width: 1025px) {
         .filter-btn:hover svg {
             transform: scale(1.03);
        }
    }
     @media screen and (max-width: 410px) {
         .filter-btn {
             font-size: 22px;
        }
    }
     .filter-btn .close {
         display: none;
    }
     .filter-btn svg {
         transition: transform .3s;
         transform: scale(1);
    }
     .wrapped-filter {
         margin-bottom: 30px;
    }
     .wrapped-filter.active .general-filter {
         display: block;
    }
     .wrapped-filter.active .filter-btn .close {
         display: block;
    }
     .wrapped-filter.active .filter-btn .filter {
         display: none;
    }
     .general-filter {
         padding: 30px 50px;
         background: var(--bg-white);
         border-radius: 10px;
         margin-top: 10px;
         display: none;
    }
     @media screen and (max-width: 1600px) {
         .general-filter {
             padding: 30px;
        }
    }
     @media screen and (max-width: 568px) {
         .general-filter {
             padding: 30px 20px;
             margin: 10px -10px 0;
             border-radius: 0;
        }
    }
     .wrapped-cols {
         display: flex;
         gap: 20px 8.333vw;
    }
     @media screen and (max-width: 1600px) {
         .wrapped-cols {
             gap: 20px 40px;
        }
    }
     @media screen and (max-width: 1366px) {
         .wrapped-cols {
             flex-wrap: wrap;
        }
    }
     .wrapped-cols .cols {
         width: 54%;
         gap: 30px 0;
         display: flex;
         margin: 0 -20px;
         justify-content: space-between;
    }
     @media screen and (max-width: 1366px) {
         .wrapped-cols .cols {
             flex-wrap: wrap;
             width: 100%;
             justify-content: flex-start;
        }
    }
     @media screen and (max-width: 568px) {
         .wrapped-cols .cols {
             flex-direction: column;
             width: 50%;
        }
    }
     @media screen and (max-width: 1366px) {
         .wrapped-cols .cols.primary .col {
             width: 33.3333%;
        }
    }
     @media screen and (max-width: 568px) {
         .wrapped-cols .cols.primary .col {
             width: 100%;
        }
    }
     .wrapped-cols .cols.second {
         width: 46%;
    }
     @media screen and (max-width: 1366px) {
         .wrapped-cols .cols.second {
             width: 100%;
        }
    }
     @media screen and (max-width: 568px) {
         .wrapped-cols .cols.second {
             width: 50%;
             flex-grow: 0;
             flex-shrink: 0;
        }
    }
     @media screen and (max-width: 1366px) {
         .wrapped-cols .cols.second .col.second {
             order: -1;
        }
    }
     .wrapped-cols .col {
         flex-shrink: 0;
         flex-grow: 0;
         padding: 0 20px;
         max-width: calc(82px + 40px);
         width: 100%;
    }
     @media screen and (max-width: 1366px) {
         .wrapped-cols .col {
             max-width: 100%;
             width: 33.3333%;
        }
    }
     @media screen and (max-width: 568px) {
         .wrapped-cols .col {
             width: 100%;
        }
    }
     .wrapped-cols .col.second {
         flex-shrink: 1;
         flex-grow: 1;
         max-width: calc(328px + 80px);
    }
     @media screen and (max-width: 1366px) {
         .wrapped-cols .col.second {
             max-width: 100%;
             width: 33.33333%;
             flex-grow: 0;
             flex-shrink: 0;
        }
    }
     @media screen and (max-width: 568px) {
         .wrapped-cols .col.second {
             width: 100%;
        }
    }
     .wrapped-cols .title {
         color: var(--color-second);
         font-size: 16px;
         margin-bottom: 15px;
    }
     .wrapped-cols .list {
         display: flex;
         flex-direction: column;
         gap: 10px;
    }
     .wrapped-cols .list.second {
         max-height: 320px;
         -moz-columns: 2;
         columns: 2;
         -moz-column-fill: auto;
         column-fill: auto;
         height: 100%;
         gap: 10px;
         flex-wrap: wrap;
    }
     @media screen and (max-width: 1366px) {
         .wrapped-cols .list.second {
             -moz-columns: 1;
             columns: 1;
             max-height: -moz-fit-content;
             max-height: fit-content;
        }
    }
     .filter-bottom {
         display: flex;
         justify-content: center;
         margin-top: 30px;
    }
     .filter-bottom .group {
         display: flex;
         align-items: center;
         justify-content: center;
         gap: 10px;
         max-width: 386px;
         width: 100%;
    }
     .filter-bottom .box {
         width: 50%;
    }
     .btn-apply, .btn-cancel {
         width: 100%;
         border: none;
         border-radius: 10px;
         display: flex;
         align-items: center;
         justify-content: center;
         font-weight: 500;
         font-size: 14px;
         padding: 12px 10px;
         cursor: pointer;
         transition: color .3s, background .3s;
    }
     .btn-apply {
         text-transform: uppercase;
         color: var(--bg-main);
         background: var(--bg-active);
    }
     @media screen and (min-width: 1025px) {
         .btn-apply:hover {
             background: var(--bg-second-active);
        }
    }
     .btn-cancel {
         color: var(--color-second);
         background: var(--bg-main);
    }
     @media screen and (min-width: 1025px) {
         .btn-cancel:hover {
             background: var(--bg-active);
             color: var(--color-white);
        }
    }
     .checkbox-label {
         display: flex;
         align-items: center;
    }
     .checkbox-label .checkbox {
         display: inline-flex;
         vertical-align: top;
         position: relative;
         margin-right: 10px;
         flex-shrink: 0;
         flex-grow: 0;
         width: 20px;
         height: 20px;
         background: var(--bg-main);
         transition: background .2s;
         border-radius: 5px;
    }
     .checkbox-label .checkbox::after {
         content: "";
         position: absolute;
         opacity: 0;
         transition: opacity .2s;
         left: 6px;
         top: 3px;
         width: 7px;
         height: 10px;
         border: solid var(--color-white);
         border-width: 0 2px 2px 0;
         transform: rotate(45deg);
    }
     .checkbox-label span:not(.checkbox) a {
         font-weight: 500;
         font-size: 14px;
         color: var(--color-second);
         display: inline-block;
         vertical-align: top;
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
    }
     .checkbox-input {
         display: none;
    }
     .checkbox-input:checked + .checkbox {
         background: var(--bg-active);
    }
     .checkbox-input:checked + .checkbox::after {
         opacity: 1;
    }
     .checkbox-input:checked + .checkbox + span {
         color: var(--color-main);
    }
     .headline {
         display: flex;
         align-items: center;
         margin-bottom: 15px;
         gap: 10px;
    }
     .headline .title {
         font-weight: 700;
         font-size: 24px;
         flex-grow: 1;
         flex-shrink: 1;
    }
     @media screen and (max-width: 1024px) {
         .headline .title {
             font-size: 22px;
        }
    }
     @media screen and (max-width: 767px) {
         .headline .title {
             font-size: 20px;
        }
    }
     .sort {
         flex-grow: 0;
         flex-shrink: 0;
         display: flex;
         align-items: center;
         gap: 10px;
    }
     .sort .dropped {
         position: relative;
    }
     .sort .dropped.show .drop-hidden {
         opacity: 1;
         transform: translate3d(0, 0, 0);
         visibility: visible;
    }
     .sort .dropped.show .btn {
         border-radius: 10px 10px 0 0;
         color: var(--color-white);
         background: var(--bg-active);
    }
     .sort .dropped.show .btn svg {
         transform: rotate(180deg);
    }
     .sort .dropped .btn {
         display: flex;
         align-items: center;
         gap: 10px;
         border: none;
         background: var(--bg-white);
         border-radius: 10px;
         padding: 10px 20px;
         font-weight: 500;
         font-size: 14px;
         color: var(--color-second);
         cursor: pointer;
         transition: color .3s, background .3s, border-radius .3s;
    }
     @media screen and (min-width: 1025px) {
         .sort .dropped .btn:hover {
             background: var(--bg-active);
             color: var(--color-white);
        }
    }
     .sort .dropped .btn svg {
         font-size: 10px;
         flex-grow: 0;
         flex-shrink: 0;
         transition: transform .3s;
    }
     .drop-hidden {
         position: absolute;
         z-index: 10;
         background: var(--bg-white);
         width: 100%;
         border-radius: 0 0 10px 10px;
         right: 0;
         top: calc(100% + 10px);
         max-height: 110px;
         overflow-y: auto;
         opacity: 0;
         transform: translate3d(0, -10%, 0);
         visibility: hidden;
         transition: opacity .3s, transform .3s, visibility .3s;
    }
     .drop-hidden a {
         padding: 5px 10px;
         display: flex;
         align-items: center;
         font-weight: 500;
         font-size: 14px;
         color: var(--color-second);
         transition: color .3s, background .3s;
    }
     @media screen and (min-width: 1025px) {
         .drop-hidden a:hover {
             background: var(--bg-active);
             color: var(--color-white);
        }
    }
     .main-flex {
         font-size: 0;
         overflow: hidden;
         margin: -10px -5px;
    }
     @media screen and (max-width: 568px) {
         .main-flex {
             margin: -7px -5px;
        }
    }
     .main-flex .item {
         font-size: 16px;
         width: 16.666%;
         display: inline-block;
         vertical-align: top;
         padding: 10px 5px;
    }
     @media screen and (max-width: 1600px) {
         .main-flex .item {
             width: 20%;
        }
    }
     @media screen and (max-width: 1366px) {
         .main-flex .item {
             width: 25%;
        }
    }
     @media screen and (max-width: 1024px) {
         .main-flex .item {
             width: 33.3333%;
        }
    }
     @media screen and (max-width: 568px) {
         .main-flex .item {
             padding: 7px 5px;
             width: 50%;
        }
    }
     .main-flex .item.second {
         width: 33.333%;
         float: left;
         position: relative;
    }
     @media screen and (max-width: 1600px) {
         .main-flex .item.second {
             width: 40%;
        }
    }
     @media screen and (max-width: 1366px) {
         .main-flex .item.second {
             width: 50%;
        }
    }
     @media screen and (max-width: 1024px) {
         .main-flex .item.second {
             width: 33.3333%;
             float: none;
        }
    }
     @media screen and (max-width: 568px) {
         .main-flex .item.second {
             width: 50%;
        }
    }
     .main-flex .item.second .main-card {
         position: relative;
         padding-bottom: 96.447%;
    }
     @media screen and (max-width: 1600px) {
         .main-flex .item.second .main-card {
             padding-bottom: 94%;
        }
    }
     @media screen and (max-width: 1024px) {
         .main-flex .item.second .main-card {
             padding-bottom: 0;
        }
    }
     .main-flex .item.second .card-media {
         position: absolute;
         top: 0;
         left: 0;
         right: 0;
         bottom: 0;
         padding: 0;
    }
     @media screen and (max-width: 1024px) {
         .main-flex .item.second .card-media {
             position: relative;
             padding-bottom: 74.712%;
        }
    }
     .tags {
         display: flex;
         align-items: center;
         gap: 10px;
         margin-bottom: 10px;
         white-space: nowrap;
         overflow: hidden;
         overflow-x: auto;
    }
     .tags::-webkit-scrollbar {
         display: none;
    }
     @media screen and (max-width: 479px) {
         .tags {
             padding: 0 10px;
             margin: 0 -10px 10px;
        }
    }
     .tags .item {
         display: flex;
         align-items: center;
         gap: 10px;
         padding: 7px 10px;
         border-radius: 10px;
         background: var(--bg-white);
         font-weight: 600;
         font-size: 14px;
         color: var(--color-second);
    }
     .tags svg {
         font-size: 12px;
         flex-grow: 0;
         flex-shrink: 0;
         cursor: pointer;
         transition: color .3s;
    }
     @media screen and (min-width: 1025px) {
         .tags svg:hover {
             color: var(--color-red);
        }
    }
     .main-card {
         color: var(--color-main);
         position: relative;
         transition: color .3s;
         display: block;
    }
     @media screen and (min-width: 1025px) {
         .main-card:hover {
             color: var(--color-active);
        }
         .main-card:hover .img {
             transform: scale(1.02);
        }
    }
     .main-card.second::after {
         position: absolute;
         content: '';
         left: 0;
         right: 0;
         bottom: 0;
         height: 134px;
         width: 100%;
         border-radius: 0 0 10px 10px;
         background: var(--bg-gradient-card);
         z-index: 10;
    }
     @media screen and (max-width: 1024px) {
         .main-card.second::after {
             display: none;
        }
    }
     .main-card.second .card-media {
         border-radius: 10px;
         margin-bottom: 0;
    }
     @media screen and (max-width: 1024px) {
         .main-card.second .card-media {
             padding-bottom: 74.712%;
             border-radius: 5px;
             margin-bottom: 7px;
        }
    }
     .main-card.second .card-content {
         padding: 10px;
         position: absolute;
         z-index: 11;
         left: 0;
         right: 0;
         bottom: 0;
         width: 100%;
    }
     @media screen and (max-width: 1024px) {
         .main-card.second .card-content {
             padding: 0;
             position: static;
        }
    }
     .card-media {
         display: block;
         height: auto;
         width: 100%;
         overflow: hidden;
         position: relative;
         border-radius: 5px;
         padding-bottom: 74.712%;
         margin-bottom: 7px;
    }
     .card-media img {
         position: absolute;
         bottom: 0;
         height: 100%;
         left: 0;
         -o-object-fit: cover;
         object-fit: cover;
         right: 0;
         top: 0;
         transition: .3s;
         width: 100%;
         transform: scale(1);
    }
     .card-content .title {
         display: flex;
         align-items: center;
         gap: 5px;
         font-weight: 500;
         margin-bottom: 4px;
    }
     .card-content .name {
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
    }
     .card-content img {
         width: 16px;
         height: 16px;
         max-width: 100%;
         -o-object-fit: cover;
         object-fit: cover;
         flex-grow: 0;
         flex-shrink: 0;
    }
     .card-content .subtitle {
         color: var(--color-second);
         font-size: 14px;
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
    }
     .wrapper-more {
         display: flex;
         align-items: center;
         justify-content: center;
         margin-top: 20px;
         font-size: initial;
    }
     .wrapper-more .more {
         text-align: center;
         cursor: pointer;
         background: var(--bg-white);
         color: var(--color-second);
         border: none;
         max-width: 267px;
         width: 100%;
         padding: 10px;
         border-radius: 10px;
         transition: color .3s, background .3s;
    }
     @media screen and (min-width: 1025px) {
         .wrapper-more .more:hover {
             background: var(--color-active);
             color: var(--color-white);
        }
    }
     .general-description {
         margin-top: 30px;
         font-size: 14px;
         line-height: 1.4;
         color: var(--color-second);
    }
     .about-model {
         display: flex;
         align-items: center;
         flex-wrap: wrap;
         gap: 10px;
         margin-bottom: 10px;
    }
     @media screen and (max-width: 1024px) {
         .about-model {
             justify-content: space-between;
        }
    }
     @media screen and (max-width: 1024px) {
         .about-model .col:not(.second) {
             width: calc(50% - 5px);
        }
    }
     .about-model .col {
         display: flex;
         align-items: center;
         flex-grow: 0;
         flex-shrink: 0;
         gap: 10px;
    }
     .about-model .col.second {
         flex-grow: 1;
         flex-shrink: 1;
    }
     @media screen and (max-width: 1024px) {
         .about-model .col.second {
             width: 100%;
             order: 1;
             gap: 3px;
        }
    }
     @media screen and (max-width: 479px) {
         .about-model .col.second {
             justify-content: space-between;
        }
    }
     @media screen and (max-width: 1024px) {
         .about-model .col.indent {
             justify-content: flex-end;
        }
    }
     @media screen and (min-width: 1025px) {
         .about-model a.author:hover {
             color: var(--color-active);
        }
    }
     .about-model .author {
         display: flex;
         align-items: center;
         color: var(--color-main);
         font-weight: 600;
         font-size: 14px;
         transition: color .3s;
    }
     .about-model .model {
         flex-grow: 0;
         flex-shrink: 0;
         width: 30px;
         height: 30px;
         max-width: 100%;
         -o-object-fit: cover;
         object-fit: cover;
         overflow: hidden;
         border-radius: 100%;
         margin-right: 10px;
    }
     .about-model .flag {
         flex-grow: 0;
         flex-shrink: 0;
         margin-left: 5px;
         width: 14px;
         height: 14px;
         max-width: 100%;
         -o-object-fit: cover;
         object-fit: cover;
    }
     .about-model .name {
         font-weight: 600;
         font-size: 14px;
    }
     @media screen and (max-width: 410px) {
         .about-model .item {
             width: 25%;
        }
    }
     .about-model .link {
         display: flex;
         align-items: center;
         justify-content: center;
         gap: 10px;
         font-weight: 600;
         font-size: 14px;
         color: var(--color-main);
         padding: 12px 20px;
         border-radius: 10px;
         background: var(--color-white);
         transition: background .3s, color .3s;
    }
     @media screen and (min-width: 1025px) {
         .about-model .link:hover {
             color: var(--color-white);
             background: var(--bg-active);
        }
         .about-model .link:hover .second {
             color: var(--color-white);
        }
    }
     @media screen and (max-width: 410px) {
         .about-model .link {
             padding: 13px 15px;
             font-size: 12px;
             width: 100%;
             gap: 5px;
        }
    }
     .about-model .link .second {
         color: var(--color-second);
         transition: color .3s;
    }
     .link-next {
         display: flex;
         align-items: center;
         gap: 10px;
         font-weight: 600;
         font-size: 14px;
         background: var(--bg-white);
         color: var(--color-main);
         border-radius: 10px;
         border: none;
         cursor: pointer;
         padding: 12px 20px;
         transition: color .3s, background .3s;
    }
     @media screen and (min-width: 1025px) {
         .link-next:hover {
             color: var(--color-white);
             background: var(--bg-active);
        }
    }
     @media screen and (max-width: 410px) {
         .link-next {
             padding: 13px 15px;
             font-size: 12px;
             gap: 5px;
        }
    }
     .link-next svg {
         font-size: 10px;
         flex-grow: 0;
         flex-shrink: 0;
    }
     .video-field {
         position: relative;
         padding-bottom: 48.744%;
         border-radius: 10px;
         overflow: hidden;
    }
     @media screen and (max-width: 767px) {
         .video-field {
             margin: 0 -10px;
             border-radius: 0;
        }
    }
     @media screen and (max-width: 479px) {
         .video-field {
             padding-bottom: 0;
             min-height: 230px;
        }
    }
     .video-field .media {
         position: absolute;
         top: 0;
         left: 0;
         right: 0;
         bottom: 0;
         width: 100%;
         height: 100%;
         -o-object-fit: cover;
         object-fit: cover;
    }
     .video-field .label {
         position: absolute;
         right: 20px;
         bottom: 20px;
         max-width: 138px;
         width: 100%;
         height: auto;
         z-index: 2;
    }
     @media screen and (max-width: 767px) {
         .video-field .label {
             display: none;
        }
    }
     .play-video {
         position: absolute;
         z-index: 3;
         top: 50%;
         left: 50%;
         transform: translate3d(-50%, -50%, 0) scale(1);
         width: 120px;
         height: 120px;
         background: rgba(var(--color-dark), 0.6);
         color: var(--color-white);
         font-size: 44px;
         border-radius: 100%;
         display: flex;
         align-items: center;
         justify-content: center;
         transition: transform .3s;
         -webkit-backdrop-filter: blur(10px);
         backdrop-filter: blur(10px);
         border: none;
         cursor: pointer;
    }
     @media screen and (min-width: 1025px) {
         .play-video:hover {
             transform: translate3d(-50%, -50%, 0) scale(1.05);
        }
    }
     @media screen and (max-width: 1366px) {
         .play-video {
             width: 100px;
             height: 100px;
             font-size: 35px;
        }
    }
     @media screen and (max-width: 767px) {
         .play-video {
             width: 60px;
             height: 60px;
             font-size: 22px;
        }
    }
     .tools-video {
         display: flex;
         align-items: center;
         padding: 10px;
         gap: 10px;
         border-radius: 0 0 10px 10px;
         background: var(--color-white);
    }
     @media screen and (max-width: 1024px) {
         .tools-video {
             flex-direction: column;
             justify-content: space-between;
        }
    }
     @media screen and (max-width: 767px) {
         .tools-video {
             margin: 0 -10px;
        }
    }
     .tools-video .col {
         flex-grow: 1;
         flex-shrink: 1;
         display: flex;
         align-items: center;
         justify-content: space-between;
         gap: 10px;
    }
     @media screen and (max-width: 1024px) {
         .tools-video .col {
             width: 100%;
        }
    }
     .tools-video .col.second {
         flex-grow: 0;
         flex-shrink: 0;
    }
     @media screen and (max-width: 1024px) {
         .tools-video .col.second {
             flex-grow: 1;
             flex-shrink: 1;
        }
    }
     @media screen and (max-width: 479px) {
         .tools-video .col.second .item {
             width: 50%;
        }
    }
     @media screen and (max-width: 479px) {
         .tools-video .item {
             width: 50%;
        }
    }
     .tools-video .btn {
         display: flex;
         align-items: center;
         justify-content: center;
         font-weight: 500;
         font-size: 16px;
         padding: 10px 20px;
         border: none;
         cursor: pointer;
         background: var(--bg-main);
         border-radius: 10px;
         gap: 10px;
         color: var(--color-main);
         transition: color .3s, background .3s;
    }
     @media screen and (min-width: 1025px) {
         .tools-video .btn:hover {
             background: var(--bg-active);
             color: var(--color-white);
             --color-coin:#fff;
        }
    }
     @media screen and (max-width: 410px) {
         .tools-video .btn {
             padding: 12px 15px;
             font-size: 13px;
             width: 100%;
             gap: 5px;
        }
    }
     .tools-video .btn.second {
         background: var(--bg-green);
         color: var(--color-white);
    }
     @media screen and (min-width: 1025px) {
         .tools-video .btn.second:hover {
             background: var(--bg-light-green);
        }
    }
     .tools-video svg {
         flex-grow: 0;
         flex-shrink: 0;
    }
     @media screen and (max-width: 410px) {
         .tools-video svg {
             width: 14px;
             height: 14px;
        }
    }
     .tools-video svg path {
         transition: fill .3s;
    }
     .tools-video .svg-icon {
         font-size: 18px;
    }
     @media screen and (max-width: 410px) {
         .tools-video .svg-icon {
             font-size: 14px;
        }
    }
     .favorite-btn {
         display: flex;
         align-items: center;
         gap: 10px;
         cursor: pointer;
         border: none;
         background: var(--bg-main);
         color: var(--color-main);
         font-weight: 600;
         font-size: 14px;
         padding: 10px 20px;
         border-radius: 10px;
         transition: color .3s, background .3s;
    }
     @media screen and (min-width: 1025px) {
         .favorite-btn:hover {
             background: var(--bg-active);
             color: var(--color-white);
        }
    }
     @media screen and (max-width: 410px) {
         .favorite-btn {
             padding: 13px 15px;
             font-size: 12px;
             gap: 5px;
        }
    }
     .favorite-btn.active {
         background: var(--bg-active);
         color: var(--color-white);
    }
     .favorite-btn svg {
         font-size: 20px;
         flex-grow: 0;
         flex-shrink: 0;
    }
     .footer {
         background-color: var(--bg-dark-blue);
         flex-shrink: 0;
         flex-grow: 0;
         padding: 30px 20px;
    }
     @media screen and (max-width: 767px) {
         .footer {
             padding: 20px;
        }
    }
     .footer-logo {
         margin-bottom: 18px;
    }
     .footer-logo img {
         max-width: 100%;
    }
     .footer-detail, .footer-text {
         font-size: 14px;
    }
     .footer-detail {
         line-height: 1.4;
         color: var(--color-white);
         margin-bottom: 18px;
    }
     .footer-text {
         color: var(--color-second);
    }
     .mask {
         backdrop-filter: blur(5px);
         background: rgba(var(--bg-mask), 0.7);
         -webkit-backdrop-filter: blur(5px);
         position: fixed;
         bottom: 0;
         left: 0;
         opacity: 0;
         right: 0;
         top: var(--header-height);
         transition: transform .3s, visibility .3s, opacity .3s;
         visibility: hidden;
         z-index: 2;
    }
     .category-list-holder, .category-col.col-2.first {
         display: grid;
         grid-template-columns: repeat(4, 1fr);
         margin: 0 -15px 30px;
    }
     .category-list-title {
         display: block;
         padding: 12px 20px;
         text-align: start;
         background: var(--bg-dark-blue);
         border-radius: 50px;
         text-transform: uppercase;
         font-weight: 600;
         font-size: 14px;
         color: #fff;
    }
     .model-filter-link {
         display: flex;
         justify-content: space-between;
         align-items: center;
         padding: 10px;
         color: #000;
         position: relative;
         transition: color .3s;
    }
     .model-filter-link::before {
         position: absolute;
         content: '';
         left: 0;
         right: 0;
         bottom: 0;
         background: var(--color-active);
         width: 0;
         height: 1px;
         transition: width .3s;
    }
     .model-filter-link .model-filter-count {
         color: var(--color-active);
    }
     .category-col {
         padding: 0 15px;
    }
     .category-col.col-2 {
         grid-column: span 2;
         height: min-content;
    }
     .category-col.col-3 {
         grid-column: span 3;
    }
     .category-col.col-4 {
         grid-column: span 4;
    }
     .category-col.col-2 .category-list-inner, .category-col.col-3 .category-list-inner, .category-col.col-4 .category-list-inner {
         display: flex;
         flex-wrap: wrap;
    }
     .category-col.col-4 .category-list-item {
         width: 25%;
    }
     .category-col.col-3 .category-list-item {
         width: 33.3333%;
    }
     .category-col.col-2 .category-list-item {
         width: 50%;
    }
     .wrapped-filter.active .general-filter {
         display: block;
    }
     .general-filter {
         padding: 30px 50px;
         background: var(--bg-white);
         border-radius: 10px;
         margin-top: 10px;
         display: none;
    }
    .wrapped-cols {
         display: flex;
         gap: 20px 8.333vw;
    }
     .wrapped-cols .col.second {
         flex-shrink: 1;
         flex-grow: 1;
         max-width: calc(328px + 80px);
    }
     .wrapped-cols .col {
         flex-shrink: 0;
         flex-grow: 0;
         padding: 0 20px;
         max-width: calc(82px + 40px);
         width: 100%;
    }
     .checkbox-input:checked + .checkbox {
         background: var(--bg-active);
    }
     .checkbox-label span:not(.checkbox) a.active + .checkbox {
         background: var(--bg-active);
    }
     .categories__alphabet-inner {
         display: -webkit-box;
         display: -ms-flexbox;
         display: flex;
         -webkit-box-align: center;
         -ms-flex-align: center;
         align-items: center;
         -ms-flex-wrap: wrap;
         flex-wrap: wrap;
    }
.category-col {
	padding: 0 15px;
}
.category-col.col-2 {
	grid-column: span 2;
	height: min-content;
}
.category-col.col-3 {
	grid-column: span 3;
}
.category-col.col-4 {
	grid-column: span 4;
}
.category-col.col-2 .category-list-inner,
.category-col.col-3 .category-list-inner,
.category-col.col-4 .category-list-inner {
	display: flex;
	flex-wrap: wrap;
}
.category-col.col-4 .category-list-item {
	width: 25%;
}
.category-col.col-3 .category-list-item {
	width: 33.3333%;
}
.category-col.col-2 .category-list-item {
	width: 50%;
}
.wrapped-filter.active .general-filter {
  display: block;
}
.general-filter {
  padding: 30px 50px;
  background: var(--bg-white);
  border-radius: 10px;
  margin-top: 10px;
  display: none;
}.wrapped-cols {
	display: flex;
	gap: 20px 8.333vw;
}
.wrapped-cols .col.second {
  flex-shrink: 1;
  flex-grow: 1;
  max-width: calc(328px + 80px);
}
.wrapped-cols .col {
  flex-shrink: 0;
  flex-grow: 0;
  padding: 0 20px;
  max-width: calc(82px + 40px);
  width: 100%;
}
.checkbox-input:checked + .checkbox {
	background: var(--bg-active);
}

 .checkbox-label span:not(.checkbox) a.active + .checkbox {
    background: var(--bg-active);
}