@layer base, component, mod; @layer base {
    :root {
        --swiper-theme-color: #007aff
    }

    :host {
        position: relative;
        display: block;
        margin-left: auto;
        margin-right: auto;
        z-index: 1
    }

    .swiper {
        margin-left: auto;
        margin-right: auto;
        position: relative;
        overflow: hidden;
        list-style: none;
        padding: 0;
        z-index: 1;
        display: block
    }

    .swiper-vertical > .swiper-wrapper {
        flex-direction: column
    }

    .swiper-wrapper {
        position: relative;
        width: 100%;
        height: 100%;
        z-index: 1;
        display: flex;
        transition-property: transform;
        transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial);
        box-sizing: content-box
    }

    .swiper-android .swiper-slide, .swiper-ios .swiper-slide, .swiper-wrapper {
        transform: translateZ(0)
    }

    .swiper-horizontal {
        touch-action: pan-y
    }

    .swiper-vertical {
        touch-action: pan-x
    }

    .swiper-slide {
        flex-shrink: 0;
        width: 100%;
        height: 100%;
        position: relative;
        transition-property: transform;
        display: block
    }

    .swiper-slide-invisible-blank {
        visibility: hidden
    }

    .swiper-autoheight, .swiper-autoheight .swiper-slide {
        height: auto
    }

    .swiper-autoheight .swiper-wrapper {
        align-items: flex-start;
        transition-property: transform, height
    }

    .swiper-backface-hidden .swiper-slide {
        transform: translateZ(0);
        backface-visibility: hidden
    }

    .swiper-3d.swiper-css-mode .swiper-wrapper {
        perspective: 1200px
    }

    .swiper-3d .swiper-wrapper {
        transform-style: preserve-3d
    }

    .swiper-3d {
        perspective: 1200px
    }

    .swiper-3d .swiper-slide, .swiper-3d .swiper-cube-shadow {
        transform-style: preserve-3d
    }

    .swiper-css-mode > .swiper-wrapper {
        overflow: auto;
        scrollbar-width: none;
        -ms-overflow-style: none
    }

    .swiper-css-mode > .swiper-wrapper::-webkit-scrollbar {
        display: none
    }

    .swiper-css-mode > .swiper-wrapper > .swiper-slide {
        scroll-snap-align: start start
    }

    .swiper-css-mode.swiper-horizontal > .swiper-wrapper {
        scroll-snap-type: x mandatory
    }

    .swiper-css-mode.swiper-vertical > .swiper-wrapper {
        scroll-snap-type: y mandatory
    }

    .swiper-css-mode.swiper-free-mode > .swiper-wrapper {
        scroll-snap-type: none
    }

    .swiper-css-mode.swiper-free-mode > .swiper-wrapper > .swiper-slide {
        scroll-snap-align: none
    }

    .swiper-css-mode.swiper-centered > .swiper-wrapper:before {
        content: "";
        flex-shrink: 0;
        order: 9999
    }

    .swiper-css-mode.swiper-centered > .swiper-wrapper > .swiper-slide {
        scroll-snap-align: center center;
        scroll-snap-stop: always
    }

    .swiper-css-mode.swiper-centered.swiper-horizontal > .swiper-wrapper > .swiper-slide:first-child {
        -webkit-margin-start: var(--swiper-centered-offset-before);
        margin-inline-start: var(--swiper-centered-offset-before)
    }

    .swiper-css-mode.swiper-centered.swiper-horizontal > .swiper-wrapper:before {
        height: 100%;
        min-height: 1px;
        width: var(--swiper-centered-offset-after)
    }

    .swiper-css-mode.swiper-centered.swiper-vertical > .swiper-wrapper > .swiper-slide:first-child {
        -webkit-margin-before: var(--swiper-centered-offset-before);
        margin-block-start: var(--swiper-centered-offset-before)
    }

    .swiper-css-mode.swiper-centered.swiper-vertical > .swiper-wrapper:before {
        width: 100%;
        min-width: 1px;
        height: var(--swiper-centered-offset-after)
    }

    .swiper-3d .swiper-slide-shadow, .swiper-3d .swiper-slide-shadow-left, .swiper-3d .swiper-slide-shadow-right, .swiper-3d .swiper-slide-shadow-top, .swiper-3d .swiper-slide-shadow-bottom {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        z-index: 10
    }

    .swiper-3d .swiper-slide-shadow {
        background: #00000026
    }

    .swiper-3d .swiper-slide-shadow-left {
        background-image: linear-gradient(to left, #00000080, #0000)
    }

    .swiper-3d .swiper-slide-shadow-right {
        background-image: linear-gradient(to right, #00000080, #0000)
    }

    .swiper-3d .swiper-slide-shadow-top {
        background-image: linear-gradient(to top, #00000080, #0000)
    }

    .swiper-3d .swiper-slide-shadow-bottom {
        background-image: linear-gradient(to bottom, #00000080, #0000)
    }

    .swiper-lazy-preloader {
        width: 42px;
        height: 42px;
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -21px;
        margin-top: -21px;
        z-index: 10;
        transform-origin: 50%;
        box-sizing: border-box;
        border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color));
        border-radius: 50%;
        border-top-color: transparent
    }

    .swiper:not(.swiper-watch-progress) .swiper-lazy-preloader, .swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader {
        animation: swiper-preloader-spin 1s infinite linear
    }

    .swiper-lazy-preloader-white {
        --swiper-preloader-color: #fff
    }

    .swiper-lazy-preloader-black {
        --swiper-preloader-color: #000
    }

    @keyframes swiper-preloader-spin {
        0% {
            transform: rotate(0)
        }
        to {
            transform: rotate(360deg)
        }
    }
} :root {
      --spacing: 100px;
      --font-primary: "rubik", sans-serif, -apple-system, blinkmacsystemfont, roboto, ubuntu, "Droid Sans", "Helvetica Neue", arial, sans-serif, "Apple Color Emoji"
  }

:root {
    --color-primary: #000;
    --color-primary--rgb: 0, 0, 0;
    --color-alt: #000;
    --color-alt--rgb: 0, 0, 0;
    --color-blck: #000;
    --color-blck--rgb: 0, 0, 0;
    --color-whte: #fff;
    --color-whte--rgb: 255, 255, 255;
    --color-accent: #61663E;
    --color-accent--rgb: 97, 102, 62;
    --color-text: #000;
    --color-text--rgb: 0, 0, 0;
    --color-text-alt: #A4A9BB;
    --color-text-alt--rgb: 164, 169, 187;
    --color-bg: #000;
    --color-bg--rgb: 0, 0, 0;
    --color-bg-main: #61663E;
    --color-bg-main--rgb: 97, 102, 62;
    --color-bg-secondary: #EEE7DA;
    --color-bg-secondary--rgb: 238, 231, 218;
    --color-success: #259243;
    --color-success--rgb: 37, 146, 67;
    --color-error: #f00;
    --color-error--rgb: 255, 0, 0;
    --font-size-default: 14px;
    --index-1: 100;
    --index-2: 200;
    --index-3: 1200;
    --index-4: 1300
}

@layer base {
    * {
        margin: 0;
        padding: 0;
        border: 0
    }

    *, *:before, *:after {
        box-sizing: border-box
    }

    *:before, *:after {
        display: inline-block
    }

    html, body {
        min-width: 360px;
        height: 100%;
        scroll-behavior: smooth;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        scrollbar-gutter: stable
    }

    body {
        color: var(--color-primary);
        font-size: var(--font-size-default);
        font-family: var(--font-primary);
        line-height: 1;
        background-color: var(--color-bg-main);
        -webkit-text-size-adjust: 100%;
        -moz-text-size-adjust: 100%;
        text-size-adjust: 100%;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale
    }

    ::-webkit-scrollbar {
        width: 6px;
        height: 5px
    }

    ::-webkit-scrollbar-track {
        background: var(--color-scroll-bg)
    }

    ::-webkit-scrollbar-thumb {
        background: var(--color-alt);
        border-radius: 10px
    }

    ::selection {
        color: var(--color-primary);
        background: var(--color-bg)
    }

    input, button, textarea {
        font-size: inherit;
        font-family: var(--font-primary);
        line-height: inherit
    }

    button {
        color: inherit;
        font-family: var(--font-primary);
        background-color: transparent;
        outline: 0;
        cursor: pointer
    }

    div[class*=__text] p:only-of-type, div[class*=__text] p:last-of-type, div[class*=__details] p:only-of-type, div[class*=__details] p:last-of-type, div[class*=__note] p:only-of-type, div[class*=__note] p:last-of-type {
        margin: 0
    }

    [class*=image] img {
        width: 100%;
        object-fit: cover;
        object-position: center
    }

    a {
        display: inline-block;
        color: inherit;
        text-decoration: none
    }

    ul li {
        list-style: none
    }

    img {
        vertical-align: top
    }

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

    address, cite {
        font-style: normal
    }

    fieldset, dl, dd {
        margin: 0;
        padding: 0
    }

    fieldset {
        border: none
    }
} .lock body {
      overflow: hidden;
      touch-action: none;
      overscroll-behavior: none
  }

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

body:after {
    position: fixed;
    top: 0;
    left: 0;
    z-index: calc(var(--index-3) - 1);
    width: 100%;
    height: 100%;
    background-color: #00000080;
    opacity: 0;
    transition: opacity .8s ease 0s;
    content: "";
    pointer-events: none
}

[data-popup].popup-open {
    pointer-events: none
}

.popup-show body:after {
    opacity: 1
}

@layer component {
    .popup {
        position: fixed;
        inset: 0;
        padding: 30px 10px;
        visibility: hidden;
        transition: visibility .8s ease 0s;
        pointer-events: none
    }

    .popup_show {
        z-index: var(--index-3);
        overflow: auto;
        visibility: visible;
        pointer-events: auto
    }

    .popup_show .popup__content {
        transform: scale(1);
        visibility: visible
    }

    .popup__wrapper {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
        min-height: 100%
    }

    .popup__content {
        width: 100%;
        max-width: 900px;
        padding: 20px;
        background-color: #eee;
        border-radius: 20px;
        transform: scale(0);
        visibility: hidden;
        transition: transform .3s ease 0s
    }

    .lock .popup__content {
        visibility: visible
    }
} .header {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: absolute;
      z-index: 10;
      padding: 2rem 1rem
  }

.header__logo {
    display: block;
    width: 5rem
}

.header__logo img {
    display: block;
    width: 100%
}

.header__flag {
    display: block;
    width: 3.75rem
}

.header__flag img {
    display: block;
    width: 100%
}

@layer component {
    .btn {
        display: inline-flex;
        justify-content: center;
        align-items: center;
        text-align: center
    }
} @layer mod; .wrapper {
                  display: flex;
                  flex-direction: column;
                  min-height: 100%;
                  overflow: hidden
              }

@supports (overflow: clip) {
    .wrapper {
        overflow: clip
    }
}

.wrapper > main {
    flex: 1 1 auto
}

.wrapper > * {
    min-width: 0
}

@layer base {
    [class*=__container], .container {
        box-sizing: border-box;
        max-width: 1920px;
        margin: 0 auto;
        padding: 0 1rem
    }
} @layer component {
    .hero__img, .hero__img img {
        display: block;
        width: 100%
    }
} @layer component {
    .gallery {
        position: relative;
        width: 100%
    }

    .gallery__logo {
        display: block;
        position: absolute;
        z-index: 2;
        top: 1rem;
        left: 1rem;
        width: 3.125rem
    }

    .gallery__logo img, .gallery__img, .gallery__img img {
        display: block;
        width: 100%
    }
} @layer component {
    .goods {
        padding: 2.5rem 0;
        background-color: var(--color-bg-secondary)
    }

    .goods__inner {
        position: relative;
        padding: 0 .5rem
    }

    .goods__slider {
        overflow: hidden;
        position: relative;
        z-index: 1
    }

    .goods__slider .swiper-slide {
        display: flex !important;
        align-items: center;
        justify-content: center
    }

    .goods__item {
        width: 17rem;
        display: flex;
        flex-direction: column
    }

    .goods__item-img {
        display: block;
        width: 100%;
        margin-bottom: 1rem
    }

    .goods__item-img img {
        display: block;
        width: 100%
    }

    .goods__item-info {
        font-size: .9375rem;
        line-height: 1.1;
        text-align: center;
        padding: 0 .5rem
    }

    .goods__item-title {
        color: var(--color-accent);
        margin-bottom: .625rem
    }

    .goods__item-desc {
        color: var(--color-text-alt);
        text-align: center
    }
} @layer component {
    .slider-nav-btn {
        position: absolute;
        top: 50%;
        width: .75rem;
        height: 1.5rem;
        background-color: var(--color-accent);
        cursor: pointer;
        z-index: 2
    }

    .slider-nav-btn--prev {
        left: 0;
        mask: url(../img/icons/arrow-prev.svg) center center/contain no-repeat;
        -webkit-mask: url(../img/icons/arrow-prev.svg) center center/contain no-repeat
    }

    .slider-nav-btn--next {
        right: 0;
        mask: url(../img/icons/arrow-next.svg) center center/contain no-repeat;
        -webkit-mask: url(../img/icons/arrow-next.svg) center center/contain no-repeat
    }

    .slider-nav-btn--white {
        background-color: var(--color-whte)
    }
} @layer component {
    .stories {
        padding: 2.5rem 0
    }

    .stories__inner {
        position: relative;
        padding: .5rem 1.25rem
    }

    .stories__slider {
        max-width: 27.5rem;
        width: 100%;
        margin: 0 auto;
        position: relative;
        overflow: hidden
    }

    .stories__slider-corner {
        position: absolute;
        width: 1.4375rem;
        height: 1.625rem;
        border-width: 2px
    }

    .stories__slider-corner--top-left {
        top: 0;
        left: 0;
        border-top: solid var(--color-whte);
        border-left: solid var(--color-whte)
    }

    .stories__slider-corner--top-right {
        top: 0;
        right: 0;
        border-top: solid var(--color-whte);
        border-right: solid var(--color-whte)
    }

    .stories__slider-corner--bottom-left {
        bottom: 0;
        left: 0;
        border-bottom: solid var(--color-whte);
        border-left: solid var(--color-whte)
    }

    .stories__slider-corner--bottom-right {
        bottom: 0;
        right: 0;
        border-bottom: solid var(--color-whte);
        border-right: solid var(--color-whte)
    }

    .stories__item {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 1.5rem .5rem;
        min-height: 16.25rem;
        font-size: .75rem;
        line-height: 1.2;
        text-transform: uppercase;
        color: var(--color-whte);
        text-align: center
    }
} @media only screen and (min-width: 767.98px) {
    .header {
        padding: 2rem 3.375rem 0 0
    }

    .header__logo {
        width: 9.125rem
    }

    .header__flag {
        width: 6rem
    }

    @layer base {
        [class*=__container], .container {
            padding: 0 1.875rem
        }
    }@layer component {
        .gallery__logo {
            top: 1.5rem;
            left: 3.5rem;
            width: 6.25rem
        }
    }@layer component {
        .goods {
            padding: 4.25rem 0
        }
    }@layer component {
        .goods__inner {
            padding: 0 1rem
        }
    }@layer component {
        .slider-nav-btn {
            width: 1rem;
            height: 2rem
        }
    }@layer component {
        .stories {
            padding: 2.8125rem 0 5.875rem
        }
    }@layer component {
        .stories__inner {
            padding: 0
        }
    }@layer component {
        .stories__slider-corner {
            width: 2.625rem;
            height: 1.625rem;
            border-width: 3px
        }
    }@layer component {
        .stories__item {
            font-size: 1rem;
            padding: 1.5rem 1rem
        }
    }
}

@media only screen and (min-width: 1023.98px) {
    @layer component {
        .goods__item {
            width: 100%
        }
    }
}


@media only screen and (min-width: 1119.98px) {
    .header {
        padding: 3.75rem 6.25rem 0 0
    }


    .header__flag {
        width: 11.25rem
    }


    @layer component {
    .goods {
        padding: 10rem 0
    }
}@layer component {
    .goods__inner {
        padding: 0 6.5625rem
    }
}@layer component {
    .goods__item-info {
        font-size: 1.375rem
    }
}@layer component {
    .slider-nav-btn {
        width: 2rem;
        height: 3.875rem
    }
}@layer component {
    .stories {
        padding: 5.3125rem 0 11rem
    }
}@layer component {
    .stories__slider {
        max-width: 50.75rem
    }
}@layer component {
    .stories__slider-corner {
        width: 4.875rem;
        height: 3.125rem;
        border-width: 6px
    }
}@layer component {
    .stories__item {
        font-size: 1.875rem;
        padding: 1.875rem;
        min-height: 30.625rem
    }
}
}

@media only screen and (min-width: 1279.98px) {
    .header {
        padding: 5rem 6.25rem 0 0
    }

    .header__logo {
        width: 22.8125rem
    }

    .header__flag {
        width: 15rem
    }

    @layer base {
        [class*=__container], .container {
            padding: 0 6.25rem
        }
    }@layer component {
    .gallery__logo {
        width: 15.5rem;
        top: 4.375rem
    }
}
    @media only screen and (min-width: 1119.98px) and (max-width: 1440px) {
        .header__logo {
            width: 17.125rem
        }
        @layer component {
            .gallery__logo {
                top: 3rem;
                left: 6.25rem;
                width: 11.625rem
            }
        }
    }
    @layer component {
        .slider-nav-btn {
            width: 2.625rem;
            height: 5.125rem
        }
    }@layer component {
    .stories {
        padding: 7rem 0 14.75rem
    }
}@layer component {
    .stories__slider {
        max-width: 1085px
    }
}@layer component {
    .stories__slider-corner {
        width: 6.5rem;
        height: 4.125rem;
        border-width: 8px
    }
}
}

@media only screen and (min-width: 1919.98px) {
    @layer base {
        [class*=__container], .container {
            padding: 0 6.5625rem
        }
    }@layer component {
    .goods {
        padding: 12rem 0
    }
}@layer component {
    .goods__inner {
        padding: 0 8.75rem
    }
}@layer component {
    .goods__item-info {
        font-size: 2rem
    }
}@layer component {
    .stories__item {
        font-size: 2.625rem;
        min-height: 40.625rem;
        padding: 2.5rem
    }
}
}

@media (max-width: 991.98px) {
    :root {
        --spacing: 80px
    }
}

@media (max-width: 767.98px) {
    :root {
        --spacing: 60px
    }
}