html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video,
button,
input {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

input {
  border: none;
}

input:focus {
  border: none;
}

/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}
body {
  line-height: 1;
}
ol,
ul {
  list-style: none;
}
blockquote,
q {
  quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

body::-webkit-scrollbar {
  width: 12px;
}
body::-webkit-scrollbar-track {
  background: var(--black);
}
body::-webkit-scrollbar-thumb {
  background-color: var(--yellow);
  border-radius: 20px 0 20px 0;
}

@media screen and (max-width: 500px) {
  body::-webkit-scrollbar {
    width: 5px;
  }
}

html,
body {
  cursor: url(images/088ca5a0f5139d2a81f5.svg) 1 1, default;
}

a,
button,
input {
  cursor: url(images/ac949e6ddda192201da4.svg) 1 1, pointer;
}

:root {
  --yellow: #f1fd53;
  --black: #1a1a1a;
  --white: #ffffff;
  --grey: #6d6d6d;
  --midgrey: #e6e6e6;
  --text: #3c3c3c;
  --lightgrey: #f3f4f5;
}

@font-face {
  font-family: 'Muller Next Wide Trial';
  src: url(fonts/MullerNextWideTrial-ExtraBold..otf) format('opentype');
  font-weight: 900;
}
@font-face {
  font-family: 'Muller Next Wide Trial';
  src: url(fonts/MullerNextWideTrial-ExtraBoldItalic..otf)
    format('opentype');
  font-weight: 900;
}
@font-face {
  font-family: 'TT Hoves Pro Trial';
  src: url("fonts/TT%20Hoves%20Pro%20Trial%20Regular..ttf") format('truetype');
  font-weight: 400;
}
@font-face {
  font-family: 'Benzin-Bold';
  src: url(fonts/benzin-bold..ttf) format('truetype');
  font-weight: 900;
}
@font-face {
  font-family: 'Evolventa-Regular';
  src: url(fonts/Evolventa-Regular..ttf) format('truetype');
  font-weight: 400;
}
@font-face {
  font-family: 'Evolventa-Bold';
  src: url(fonts/Evolventa-Bold..ttf) format('truetype');
  font-weight: 900;
}

@font-face {
  font-family: 'Inter-Regular';
  src: url(fonts/Inter-Regular..ttf) format('truetype');
  font-weight: 400;
}

@font-face {
  font-family: 'Inter-SemiBold';
  src: url(fonts/Inter-SemiBold..ttf) format('truetype');
  font-weight: 600;
}

@font-face {
  font-family: 'Siegra';
  src: url(fonts/Siegra..ttf) format('truetype');
  font-weight: 400;
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  overflow-x: hidden;
  font-size: 16px;
  scroll-behavior: smooth;
  background-color: var(--white);
}

.yellow {
  color: var(--yellow) !important;
}

.white {
  color: var(--white) !important;
}

.black {
  color: var(--black) !important;
}

.grey {
  color: var(--grey) !important;
}

.hidden {
  display: none !important;
}

.img-animate {
  position: relative;
  overflow: hidden;
}

.img-animate::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-size: cover;
  background-position: center;
  transition: transform 0.2s ease-out;
  z-index: 0;
}

.img-animate:hover::before {
  transform: scale(1.06);
}

.img-animate > * {
  position: relative;
  z-index: 2;
}
.highlight {
  color: var(--yellow);
}
ul {
  list-style-type: disc;
  padding-left: 20px;
}
b,
strong {
  font-family: 'Inter-SemiBold';
  font-weight: 600;
}
.disabled {
  background-color: var(--grey) !important;
  cursor: url(images/088ca5a0f5139d2a81f5.svg) 1 1, default !important;
}
nav.navMobile {
  width: 90%;
  height: 10vw;
  display: none;
  align-items: center;
  justify-content: space-between;
  padding: 8vw;
  border-radius: 4vw;
  margin: 5vw;

  img {
    width: 10%;
    height: auto;
  }
  a {
    width: 30%;
    img {
      width: 100%;
    }
  }
}
.none {
  display: none;
}
body {
  h1 {
    font-family: 'Benzin-Bold', sans-serif;
    font-size: 6.4rem;
    text-transform: uppercase;
    color: var(--yellow);
  }
  h2 {
    font-family: 'Benzin-Bold', sans-serif;
    font-size: 4.1rem;
    text-transform: uppercase;
    color: var(--black);
    line-height: 5vw;
  }
  h4 {
    font-family: 'Benzin-Bold', sans-serif;
    font-size: 2.375rem;
    color: var(--black);
  }
  h3 {
    font-family: 'Evolventa-Bold', sans-serif;
    font-size: 2rem;
    color: var(--black);
  }
  h5 {
    font-family: 'Benzin-Bold', sans-serif;
    font-size: 5.2rem;
    text-transform: uppercase;
    color: var(--yellow);
    display: block;
  }
  a {
    text-decoration: none;
    font-size: 1.125rem;
    text-align: center;
  }
  .cover {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    width: 93%;
    height: 50vw;
    margin: 9vw 3.5vw 0 3.5vw;
    border-radius: 0.5vw;
    display: flex;
    justify-content: center;
    align-items: center;
    hgroup {
      display: flex;
      justify-content: center;
      flex-direction: column;
      align-items: center;
      h1 {
        text-align: center;
      }
      h5 {
        text-align: center;
      }
      p {
        color: var(--yellow);
        text-align: center;
        width: 40%;
        margin-top: 2vw;
      }
    }
  }
}

.W_HeaderWithFilter {
  .A_Header1 {
    color: var(--black);
  }
}

@media screen and (max-width: 500px) {
  .O_Header {
    display: none;
  }
  .O_HeaderMobile {
    display: flex;
  }

  body {
    h1 {
      font-size: 3.6rem;
      text-align: center;
      line-height: 16vw;
    }
    h2 {
      font-size: 3rem;
      font-size: 2.2rem;
      line-height: 9vw;
    }
    h3 {
      font-size: 1.875rem;
    }
    h4 {
      font-size: 1.5rem;
    }
    p {
      font-size: 1rem;
    }
    .cover {
      height: 230vw;
      background-position: -60vw;
      margin: 0;
      width: 100%;
    }
  }
}
.active {
  display: flex !important;
}
@media screen and (max-width: 1024px) {
  body {
    h1 {
      font-size: 3rem;
      line-height: 3.7rem;
    }
    h2 {
      font-size: 2.6rem;
      line-height: 3.5rem;
    }
    h3 {
      font-size: 1.5rem;
      line-height: 1.7rem;
    }
    h4 {
      font-size: 2rem;
    }
    h5 {
      font-size: 3.2rem;
    }
    p {
      font-size: 1rem;
    }
  }
}

* {
  box-sizing: border-box;
}
body.styleguide {
  background-color: var(--white);
  width: 100%;

  h1 {
    font-size: 1.625rem;
    font-family: 'benzin-bold';
    font-weight: 900;
    color: var(--black);
    text-transform: none;
    width: 24vw;
    font-weight: 900;
    text-transform: none;
    margin-top: 0;
    color: var(--black);
    font-family: benzin-bold;
    font-size: 1.625rem;
    line-height: 3.7rem;
  }
  h2 {
    font-size: 1rem;
    font-family: 'Evolventa-Bold';
    font-weight: 900;
    color: var(--yellow);
    text-transform: none;
    line-height: 0;
  }
  h3 {
    font-size: 1.25rem;
    font-family: 'Evolventa-Regular';
    font-weight: 400;
    color: var(--text);
    margin: 1rem 0;
  }
  p {
    font-size: 1rem;
    font-family: 'Evolventa-Regular';
    font-weight: 400;
    color: var(--text);
  }
  hgroup > p {
    line-height: 1.2rem;
  }
  nav.leftNav {
    position: fixed;
    top: -2vw;
    left: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    background-color: var(--black);
    width: 10%;
    height: 100vh;
    padding: 0 1.5vw;
    justify-content: flex-start;
    gap: 1vw;

    img {
      width: 97%;
      height: auto;
      margin: 3vw 0;
    }

    a {
      text-decoration: none;
      font-size: 1.125rem;
      font-family: 'Evolventa-Regular';
      font-weight: 400;
      color: var(--white);
      width: 100%;
      text-align: start;
      display: flex;
    }
    a:nth-child(5) {
      padding: 0;
      border-radius: 0;
      width: 11%;
    }
    a:hover {
      color: var(--yellow);
    }
  }
  .cover {
    width: 100%;
    height: 56.25vw;
    background-color: var(--yellow);
    display: flex;
    flex-direction: column;
    position: relative;
    padding: 22vw 12vw;
    margin: 0;
    gap: 0;
    align-items: flex-start;

    img {
      width: 35.3%;
      height: auto;
    }
  }

  .style {
    section,
    section + hgroup {
      margin-left: 13.6vw;
      display: flex;
      flex-direction: row;
      gap: 4.375rem;

      p {
        width: 24vw;
        margin-top: 2vw;
      }
      h1 {
        width: 24vw;
        margin-top: 0vw;
      }
    }

    .style_about {
      margin-top: 3vw;
    }

    section + hgroup {
      margin-top: 3.6vw;
      flex-direction: column;
      gap: 0;

      p {
        font-size: 5.5rem;
        font-family: 'benzin-bold';
        font-weight: 900;
        color: var(--black);
        line-height: 5.7rem;
      }
    }

    .style_logo,
    .style_color,
    .style_space,
    .style_sign,
    .style_pattern,
    .style_forbidden,
    .style_colors,
    .style_fonts,
    .style_fontsSecond,
    .style_grid,
    .style_branding {
      margin-top: 12vw;
      gap: 3vw;
    }

    section + img {
      margin-left: 13.6vw;
      margin-top: 8vw;
      width: 84%;
      height: auto;
    }

    .style_color {
      section {
        margin-left: 0;
        width: 64vw;
        height: auto;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 1vw;

        div {
          width: 49%;
          height: 24vw;
          border-radius: 0.8rem;
          display: flex;
          align-items: center;
          justify-content: center;

          img {
            width: 66%;
            height: auto;
          }
        }

        div:nth-child(1) {
          background-color: var(--black);
        }
        div:nth-child(2) {
          background-color: var(--yellow);
        }
        div:nth-child(3) {
          background-image: url(images/8e5fe9c4ee6b53af7c39.webp);
          background-repeat: no-repeat;
          background-size: cover;
        }
        div:nth-child(4) {
          display: flex;
          flex-direction: column;
          gap: 1vw;
          div {
            width: 100%;
            height: 11.5vw;
          }
          div.lastLogo {
            background-color: var(--white);
            border: 0.05vw solid var(--black);
          }
        }
      }
    }

    .style_space {
      div {
        margin-left: 0;
        width: 64vw;
        height: 24vw;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: var(--black);
        border-radius: 0.5vw;

        img {
          width: 70%;
          height: auto;
        }
      }
    }

    .style_sign {
      section {
        margin-left: 0;
        display: flex;
        flex-direction: row;
        width: 64vw;
        height: 20vw;
        gap: 1vw;

        div {
          display: flex;
          width: 32.6%;
          height: 20.6vw;
          border-radius: 3vw;
          justify-content: center;
          align-items: center;

          img {
            width: 65%;
            height: auto;
          }
        }
        div:nth-child(1) {
          background-color: var(--black);
        }
        div:nth-child(2) {
          background-color: var(--yellow);
        }
        div:nth-child(3) {
          background-color: var(--black);
        }
      }
    }

    .style_pattern {
      img {
        margin-left: 0;
        width: 64vw;
        height: auto;
        border-radius: 0.8rem;
      }
    }

    .style_forbidden {
      div {
        width: 64vw;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0.6vw;

        img {
          width: 49%;
          height: auto;
        }
      }
    }

    .style_colors {
      section {
        width: 64vw;
        height: 45.5vw;
        display: flex;
        gap: 0.6vw;
        margin-left: 0;

        div {
          height: 100%;
          border-radius: 0.5vw;
          padding: 1vw 0.8vw;
          display: flex;
          align-items: flex-end;
          justify-content: end;
          flex-direction: column;
        }

        div:nth-child(1) {
          background-color: var(--yellow);
          width: 30.5%;
          p {
            color: var(--black);
            width: 100%;
          }
          p:nth-child(1) {
            font-family: 'Evolventa-Bold';
            font-weight: 900;
            font-size: 4rem;
          }
          p:nth-child(2) {
            font-family: 'Evolventa-Regular';
            margin-top: 0.5vw;
          }
        }
        div:nth-child(2) {
          background-color: var(--black);
          width: 30.5%;
          p {
            color: var(--white);
            width: 100%;
          }
          p:nth-child(1) {
            font-family: 'Evolventa-Bold';

            font-size: 4rem;
          }
          p:nth-child(2) {
            font-family: 'Evolventa-Regular';
            margin-top: 0.5vw;
          }
        }
        div:nth-child(3) {
          background-color: var(--grey);
          width: 18.5%;
          p {
            color: var(--black);
            width: 100%;
          }
          p:nth-child(1) {
            font-family: 'Evolventa-Bold';

            font-size: 4rem;
          }
          p:nth-child(2) {
            font-family: 'Evolventa-Regular';
            margin-top: 0.5vw;
          }
        }
        div:nth-child(4) {
          background-color: var(--white);
          width: 18.5%;
          border: 0.05vw solid var(--black);
          p {
            color: var(--black);
            width: 100%;
          }
          p:nth-child(1) {
            font-family: 'Evolventa-Bold';

            font-size: 4rem;
          }
          p:nth-child(2) {
            font-family: 'Evolventa-Regular';
            margin-top: 0.5vw;
          }
        }
      }
    }

    .style_fonts {
      section {
        width: 64vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1.2vw;
        margin-left: 0;

        div {
          width: 100%;
          background-color: var(--black);
          border-radius: 0.5vw;
          padding: 1.6vw 2.8vw;
        }
        div:nth-child(1) {
          height: 16.5vw;
          p {
            font-family: 'benzin-bold';
            font-size: 9.6vw;
            color: var(--white);
          }
        }
        div:nth-child(2) {
          height: 13vw;
          p {
            color: var(--yellow);
            font-size: 4vw;
            font-family: 'benzin-bold';
            margin-top: 1.2vw;
          }
        }
        div:nth-child(3) {
          height: 11vw;
          p {
            color: var(--white);
            font-size: 1.5vw;
            font-family: 'Benzin-Bold';
            margin-top: 1.5vw;
            line-height: 1.8vw;
          }
        }
      }
    }

    .style_fontsSecond {
      section {
        width: 64vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1.2vw;
        margin-left: 0;

        div {
          width: 100%;
          background-color: var(--black);
          border-radius: 0.5vw;
          padding: 1.6vw 2.8vw;
        }
        div:nth-child(1) {
          height: 16.5vw;
          p {
            font-family: 'Evolventa-Bold';
            font-size: 9.6vw;
            color: var(--white);
          }
        }
        div:nth-child(2) {
          height: 13vw;
          p {
            color: var(--yellow);
            font-size: 4vw;
            font-family: 'Evolventa-Bold';
            font-weight: 900;
            margin-top: 0.6vw;
          }
        }
        div:nth-child(3) {
          height: 14vw;
          display: flex;
          flex-direction: row;
          gap: 3vw;
          p {
            color: var(--white);
            font-size: 1.5vw;
            margin-top: 1.4vw;
            line-height: 1.6vw;
          }
          hgroup:nth-child(2) {
            p {
              font-family: 'Evolventa-Bold';
              font-weight: 900;
            }
          }
        }
      }
    }

    .style_grid {
      div {
        width: 64vw;
        height: auto;
        margin-left: 0;
        display: flex;
        justify-content: center;
        background-color: var(--black);
        border-radius: 0.5vw;

        img {
          width: 91%;
          height: auto;
        }
      }
    }

    .style_branding {
      div {
        width: 64vw;
        display: flex;
        flex-direction: column;
        gap: 1.2vw;
        margin-bottom: 10vw;

        img {
          width: 100%;
          height: auto;
          border-radius: 0.5vw;
        }
      }
    }
  }
}
@media screen and (max-width: 1760px) {
  body.styleguide {
    .style {
      section + hgroup {
        p {
          font-size: 4.2rem;
          line-height: 4.5rem;
        }
      }

      .style_logo,
      .style_color,
      .style_space,
      .style_sign,
      .style_pattern,
      .style_forbidden,
      .style_colors,
      .style_fonts,
      .style_fontsSecond,
      .style_grid,
      .style_branding {
        margin-top: 12vw;
        gap: 2.4vw;
      }
      .style_color,
      .style_sign,
      .style_colors,
      .style_fonts,
      .style_fontsSecond {
        section {
          width: 58vw;
        }
      }

      .style_space {
        div {
          width: 58vw;
        }
      }

      .style_pattern {
        img {
          width: 58vw;
        }
      }

      .style_forbidden {
        div {
          width: 58vw;
        }
      }

      .style_grid {
        div {
          width: 58vw;
        }
      }

      .style_branding {
        div {
          width: 58vw;
        }
      }
    }
  }
}
@media screen and (max-width: 1350px) {
  body.styleguide {
    & .style {
      & section + hgroup {
        p {
          font-size: 3.6rem;
          line-height: 4.5rem;
        }
      }
    }
  }
}
@media screen and (max-width: 1024px) {
  body.styleguide {
    nav.leftNav {
      a {
        font-size: 1rem;
      }
    }
    .style {
      section,
      section + hgroup {
        gap: 3rem;
      }
      section + hgroup {
        p {
          font-size: 3rem;
          line-height: 3rem;
        }
      }
    }
  }
}
@media screen and (max-width: 920px) {
  body.styleguide {
    nav.leftNav {
      width: 12%;
    }
    .style {
      margin-left: 2vw;
      section,
      & section + hgroup {
        p {
          width: 75%;
        }
      }
      section + hgroup {
        p {
          font-size: 2.6rem;
        }
      }
      .style_about,
      .style_logo,
      .style_color,
      .style_space,
      .style_sign,
      .style_pattern,
      .style_forbidden,
      .style_colors,
      .style_fonts,
      .style_fontsSecond,
      .style_grid,
      .style_branding {
        flex-direction: column;
      }
    }
  }
}

/*
QUARKS
_________________________________________________________________________________________
*/

.Q_BgWhite {
  background-color: var(--white);
  color: var(--black);

  &:hover {
    background-color: var(--yellow);
    color: var(--black);
  }
}

.Q_BgYellow {
  background-color: var(--yellow);
  color: var(--black);
}

.Q_BgYellowButton {
  background-color: var(--yellow);
  color: var(--black);

  &:hover {
    background-color: var(--black);
    color: var(--yellow);
  }
}

.Q_BgGrey {
  background-color: var(--grey);
  color: var(--yellow);
}

.Q_BgBlack {
  background-color: var(--black);
  color: var(--white);

  &:hover {
    background-color: var(--yellow);
    color: var(--black) !important;
  }
}

.Q_ButtonStroke {
  background-color: none;
  border: solid 1.5px var(--black);
}

.Q_ButtonStrokeWhite {
  background-color: none;
  border: solid 1.5px var(--white);

  &:hover {
    color: var(--yellow) !important;
    border-color: var(--yellow);
  }
}

.Q_Row {
  gap: 10px;
}

.Q_Column {
  flex-direction: column;
  gap: 8px;
}

.Q_HeaderWidth {
  width: 35%;
}

.Q_BodyTextWidth {
  width: 60%;
}

.Q_MainCover {
  background-image: url(images/1dd23636f22376f4aeea.webp);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.Q_BannerPattern {
  background-image: url(images/be2708cf401577914af8.webp);
  width: 100%;
  background-size: cover;
}

.Q_BannerQuote {
  background-image: url(images/77197b78d75c9abcaacb.webp);
  width: 100%;
  background-size: cover;
}

.Q_BannerSkateboards {
  background-image: url(images/789665abf74a6d30884b.webp);
  background-repeat: no-repeat;
  width: 100%;
  background-size: cover;
  background-position: center;
  border-radius: 1.25rem;
}

.Q_LocationMainPhoto {
  background-image: url(images/939114e0b3b1a4232cc2.webp);
  background-size: cover;
}

.Q_TricksPhoto1 {
  background-image: url(images/2092aabecb36bffdfbb4.webp);
  background-size: cover;
  border-radius: 50px 0;
  height: 60vh;
  width: 40%;
}

.Q_TricksPhoto2 {
  background-image: url(images/3137e06ddc07f4da08a8.webp);
  background-size: cover;
  border-radius: 50px 0;
  height: 60vh;
  width: 60%;
}
.Q_CardScooter {
  background-image: url(images/4deb54a53a66a7dc1d6d.webp);
  background-size: cover;
  border-radius: 50px 0;
  width: 100%;
  height: 100%;
  background-position: right;
  transition: background-image 0.2s ease-in-out, color 0.2s ease-in-out;

  &:hover {
    background-image: url(images/6e5e723c4b9ea50e5393.webp);
  }
}

.Q_CardSkateboard {
  background-image: url(images/af003f7f9e164233748d.webp);
  background-size: cover;
  width: 100%;
  height: 100%;
  background-position: right;
  transition: background-image 0.2s ease-in-out, color 0.2s ease-in-out;

  &:hover {
    background-image: url(images/14a4cee942b26645ee3a.webp);
  }
}

.Q_CardBMX {
  background-image: url(images/d9e2411c2265c2c51e60.webp);
  background-size: cover;
  border-radius: 50px 0;
  width: 100%;
  height: 100%;
  background-position: right;
  transition: background-image 0.2s ease-in-out, color 0.2s ease-in-out;
  &:hover {
    background-image: url(images/01d1a95442cc1a9bfb14.webp);
  }
}
.Q_SectionHeaderPhoto {
  width: 100%;
  height: 80%;
}
.Q_LogoWithTg {
  width: 26%;
  background-image: url(images/1ec443b99c1f8950f734.svg);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.Q_FooterBg {
  background-image: url(images/ac19c4434d225918fd82.webp);
  background-size: cover;
}
.Q_MetroLogo {
  width: 2.5rem;
  height: 1.4rem;
}
.Q_GradientSquare {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    to top,
    rgba(26, 26, 26, 1) 0%,
    rgba(26, 26, 26, 0) 80%,
    rgba(26, 26, 26, 0) 100%
  );
  z-index: 1;
}

.Q_GradientSquareCover {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to top,
    rgba(26, 26, 26, 0.9) 0%,
    rgba(26, 26, 26, 0) 80%,
    rgba(26, 26, 26, 0) 100%
  );
  z-index: 0;
}

// ADD IMAGES

.Q_LocPhoto0::before {
  background-image: url(images/0aaa13eea4957565719c.webp);
}
.Q_LocPhoto1::before {
  background-image: url(images/0aaa13eea4957565719c.webp);
}
.Q_LocPhoto2::before {
  background-image: url(images/97725f570c67c5316ca0.webp);
}
.Q_LocPhoto3::before {
  background-image: url(images/604ae1deffe7ad81ab34.webp);
}
.Q_LocPhoto4::before {
  background-image: url(images/103d219979d724edc15c.webp);
}
.Q_LocPhoto5::before {
  background-image: url(images/caf5cc443b3fbe9b421f.webp);
}
.Q_LocPhoto6::before {
  background-image: url(images/364418ed64dc9a23b82c.webp);
}
.Q_LocPhoto7::before {
  background-image: url(images/fc46b127be772cbaf226.webp);
}
.Q_LocPhoto8::before {
  background-image: url(images/d6f05b4c1d5e4d9e4129.webp);
}
.Q_LocPhoto9::before {
  background-image: url(images/20bde833b00ec69a4502.webp);
}
.Q_LocPhoto10::before {
  background-image: url(images/b36a6de7ec52a6b8f7e5.webp);
}
.Q_LocPhoto11::before {
  background-image: url(images/0ecccc27677f88ac98d8.webp);
}
.Q_LocPhoto12::before {
  background-image: url(images/eee70122bcd144f19bce.webp);
}

.Q_FunCard1::before {
  background-image: url(images/987d50c42a2b81c1e510.webp);
}
.Q_FunCard2::before {
  background-image: url(images/d21e30f9a835baa2ea6e.webp);
}
.Q_FunCard3::before {
  background-image: url(images/06baf83b7123b40f643f.webp);
}
.Q_FunCard4::before {
  background-image: url(images/9c19938d0062928ae66e.webp);
}
.Q_FunCard5::before {
  background-image: url(images/bdad2d43073e86512d8c.webp);
}
.Q_FunCard6::before {
  background-image: url(images/136acfc9f046751626b4.webp);
}
.Q_FunCard7::before {
  background-image: url(images/713fae273c4e868c4d96.webp);
}
.Q_FunCard8::before {
  background-image: url(images/aba2d2eb7660f2ad9e7b.webp);
}
.Q_FunCard9::before {
  background-image: url(images/f171d5fb1716c0002536.webp);
}
.Q_FunCard10::before {
  background-image: url(images/c7192b7f51d98a2236d4.webp);
}
.Q_FunCard11::before {
  background-image: url(images/3cd9478c795e0e1fd380.webp);
}
.Q_FunCard12::before {
  background-image: url(images/9815ebe9f371b480c385.webp);
}

.Q_SpotsCovers {
  background-size: cover;
  background-position: center center;
}

.Q_SpotsCover1 {
  background-image: url(images/0aaa13eea4957565719c.webp);
}
.Q_SpotsCover2 {
  background-image: url(images/97725f570c67c5316ca0.webp);
}
.Q_SpotsCover3 {
  background-image: url(images/604ae1deffe7ad81ab34.webp);
}
.Q_SpotsCover4 {
  background-image: url(images/103d219979d724edc15c.webp);
}
.Q_SpotsCover5 {
  background-image: url(images/caf5cc443b3fbe9b421f.webp);
}
.Q_SpotsCover6 {
  background-image: url(images/364418ed64dc9a23b82c.webp);
}
.Q_SpotsCover7 {
  background-image: url(images/fc46b127be772cbaf226.webp);
}
.Q_SpotsCover8 {
  background-image: url(images/d6f05b4c1d5e4d9e4129.webp);
}
.Q_SpotsCover9 {
  background-image: url(images/20bde833b00ec69a4502.webp);
}
.Q_SpotsCover10 {
  background-image: url(images/b36a6de7ec52a6b8f7e5.webp);
}
.Q_SpotsCover11 {
  background-image: url(images/0ecccc27677f88ac98d8.webp);
}
.Q_SpotsCover12 {
  background-image: url(images/eee70122bcd144f19bce.webp);
}

.Q_Trick1_1 {
  background-image: url(images/764f3bf3888557499be9.webp);
}
.Q_Trick2_1 {
  background-image: url(images/462209faaab6fadaa7ee.webp);
}
.Q_Trick3_1 {
  background-image: url(images/6085676fc05588bae6a7.webp);
}
.Q_Trick4_1 {
  background-image: url(images/8562f2918d67e916f952.webp);
}
.Q_Trick5_1 {
  background-image: url(images/7259ba7c196d74ea3485.webp);
}
.Q_Trick6_1 {
  background-image: url(images/aac730bd5346953b3585.webp);
}

.Q_Trick7_1 {
  background-image: url(images/87c8ed9fb9bd10d3d163.webp);
}
.Q_Trick8_1 {
  background-image: url(images/b676e3c381fc1ccf5d6d.webp);
}
.Q_Trick9_1 {
  background-image: url(images/f0d49098c087f4e53618.webp);
}
.Q_Trick10_1 {
  background-image: url(images/5f354f64b5e810d0c5ed.webp);
}
.Q_Trick11_1 {
  background-image: url(images/3f213549498716d43ce3.webp);
}
.Q_Trick12_1 {
  background-image: url(images/35ee966b54d4c847664a.webp);
}

.Q_Trick13_1 {
  background-image: url(images/facc34b6b1701f70f5b6.webp);
}
.Q_Trick14_1 {
  background-image: url(images/1d2cef83ba31107476a3.webp);
}

.Q_Trick15_1 {
  background-image: url(images/8c18f7e7f0090aae8c7c.webp);
}
.Q_Trick16_1 {
  background-image: url(images/dd5f870b788907f60adf.webp);
}
.Q_Trick17_1 {
  background-image: url(images/8eff24d40001582cfcdf.webp);
}
.Q_Trick18_1 {
  background-image: url(images/fb5b8dd5f7eedae4840c.webp);
}
.Q_Trick1_2 {
  height: fit-content;
  width: 39%;
}
.Q_Trick1_3 {
  height: fit-content;
  width: 59%;
}

.Q_SlangsPhoto2 {
  width: 60%;
}
.Q_SlangsPhoto2 {
  width: 60%;
  height: fit-content;
  margin: 3.75rem 0 3.75rem 0;
}
.Q_FilmPhoto {
  width: 35%;
  height: fit-content;
}

.Q_TipCardSmall1 {
  background-image: url(images/3b39cc2806345115222d.webp);
}
.Q_Tips1Photo {
  background-image: url(images/fba0688364aeddad8646.webp);
}
.Q_Tips2Photo {
  background-image: url(images/231151c8484a6dc5b31c.webp);
}
.Q_Tips3Photo {
  background-image: url(images/dad6034d0bb76e317fbd.webp);
}
.Q_Tips4Photo {
  background-image: url(images/e02a624e602ff5097f11.webp);
}
.Q_Tips5Photo {
  background-image: url(images/f310e5445894ef284cd5.webp);
}
.Q_Tips6Photo {
  background-image: url(images/483445499665a80c681e.webp);
}
.Q_Tips7Photo {
  background-image: url(images/d649a5b6894dc999605a.webp);
}
.Q_Tips8Photo {
  background-image: url(images/3338c49657c6669ec68f.webp);
}
.Q_Tips9Photo {
  background-image: url(images/3a183186fa777035530d.webp);
}
.Q_Tips10Photo {
  background-image: url(images/eab98fef554760d92124.webp);
}
.Q_Tips11Photo {
  background-image: url(images/83d2585cea91215c5274.webp);
}
.Q_Tips12Photo {
  background-image: url(images/42dd8e4cab2bcd9900e3.webp);
}
.Q_Tips13Photo {
  background-image: url(images/f8c814fab058a31722f8.webp);
}

.Q_BannerQuestion {
  background-image: url(images/50ff8e4f161292b54108.webp);
  background-size: 30%;
  background-repeat: no-repeat;
  background-position: 90% center;
}

.Q_Song {
  width: 18.125rem;
}

.Q_Artist {
  width: 15rem;
}

.Q_Album {
  width: 12.9375rem;
}

@media screen and (max-width: 500px) {
  .Q_SectionHeaderPhoto {
    width: 100%; /* Ширина картинки на 100% */
    height: 100%; /* Картинка растягивается по высоте родительского блока */
    object-fit: cover; /* Сохраняет пропорции изображения, обрезая лишнее при необходимости */
  }
  .Q_SectionHeaderPhotoMobile {
    position: absolute; /* Абсолютное позиционирование */
    top: 0;
  }
  .Q_SectionHeaderPhotoSpotsMobile {
    object-position: right center;
  }
  .Q_BannerQuote {
    background-position: -3rem;
  }
  .Q_LogoWithTg {
    width: 100%;
    height: 15vh;
  }
  .Q_SlangsPhoto2 {
    width: 100%;
  }
  .Q_SectionHeaderPhotoMobile {
    position: absolute;
    top: 0;
  }
  .Q_SectionHeaderPhotoFunMobile {
    object-position: center;
  }
  .Q_FilmPhoto {
    width: 50%;
  }
  .Q_MainCover {
    background-position: right;
  }

  .Q_GradientSquareCover {
    background: linear-gradient(
      to top,
      rgba(26, 26, 26, 1) 0%,
      rgba(26, 26, 26, 1) 5%,
      rgba(26, 26, 26, 0) 100%
    );
  }

  .Q_BannerQuestion {
    background-position: center 1.88rem;
    background-size: 20rem;
  }
}

/*
ATOMS
_________________________________________________________________________________________
*/

.A_Header0 {
  font-family: 'Benzin-Bold', sans-serif;
  font-size: 5.2rem;
  text-transform: uppercase;
  letter-spacing: 2%;
  line-height: 105%;
}

.A_Header1 {
  font-family: 'Benzin-Bold', sans-serif;
  font-size: 4.125rem;
  text-transform: uppercase;
  letter-spacing: 0.12375rem;
  line-height: 115%;
}

.A_Header2 {
  font-family: 'Benzin-Bold', sans-serif;
  font-size: 1.9rem;
  text-transform: uppercase;
  color: var(--black);
  letter-spacing: 3%;
  line-height: 2.3rem;
}

.A_Quote {
  font-family: 'Benzin-Bold', sans-serif;
  font-size: 1.8rem;
  text-transform: uppercase;
  color: var(--white);
  letter-spacing: 3%;
  line-height: 2.1rem;
  width: 55%;
  margin-left: 8%;
}

.A_Header3 {
  font-family: 'Benzin-Bold', sans-serif;
  font-size: 1.25rem;
  color: var(--black);
  letter-spacing: 0.037rem;
  line-height: 1.6rem;
}

.A_HeaderCards {
  font-family: 'Benzin-Bold', sans-serif;
  font-size: 1.8rem;
  text-transform: uppercase;
  color: var(--black);
  letter-spacing: 0.0525rem;
  line-height: 2.1rem;
}

.A_HeaderTest {
  margin: 10rem 10.19rem 1.25rem 10.19rem;
}

.A_BodyText {
  font-family: 'Inter-Regular';
  font-size: 1.125rem;
  color: var(--black);
  line-height: normal;
  letter-spacing: 0.012rem;
}

.A_BodyTextWhite {
  font-family: 'Inter-Regular';
  font-size: 1.125rem;
  color: var(--white);
  letter-spacing: 0.012rem;
  line-height: normal;
}

.A_BodyTextItalic {
  font-family: 'Inter-Regular';
  font-style: italic;
  font-size: 1.125rem;
  color: var(--black);
  letter-spacing: 0.012rem;
  line-height: normal;
}

.A_TextAnnotation {
  font-family: 'Inter-Regular';
  font-style: italic;
  color: var(--text);
  font-size: 1.125rem;
  line-height: 1.25rem;
  letter-spacing: 0.01125rem;
}

.A_BodyTextBold {
  font-family: 'Inter-SemiBold';
  font-size: 1.125rem;
  color: var(--black);
  line-height: normal;
  letter-spacing: 0.012rem;
}

.A_TextButton {
  font-family: 'Inter-SemiBold';
  font-size: 1.125rem;
  letter-spacing: 1%;
  line-height: 1.2rem;
}

.A_Button {
  padding: 16px 32px;
  width: fit-content;
  border-radius: 6px;

  &:hover {
    .A_TextButton {
      text-decoration: none;
    }
  }
}
.A_ButtonSmall {
  display: inline-flex;
  padding: 0.625rem 1.5rem;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  background-color: var(--white);
  border-radius: 0.375rem;
  color: var(--black, #1a1a1a);
  font-family: 'Inter-SemiBold';
  font-size: 1rem;
  font-style: normal;
  font-weight: 600;
  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
  &:hover {
    background-color: var(--yellow);
  }
}
.A_FactText {
  font-family: 'Inter-Regular';
  font-size: 1.125rem;
  text-align: center;
  color: var(--white);
  letter-spacing: 1%;
}

.A_FactNumber {
  font-family: 'Benzin-Bold', sans-serif;
  font-size: 4.6rem;
  text-transform: uppercase;
  color: var(--yellow);
  text-align: center;
}

.A_Tag {
  font-family: 'Inter-Regular';
  font-size: 0.9rem;
  text-align: center;
  width: fit-content;
  padding: 6px 24px;
  border-radius: 0.18rem;
  letter-spacing: 0.0075rem;
}

.A_TagLarge {
  font-family: 'Inter-Regular';
  font-size: 1.1rem;
  text-align: center;
  width: fit-content;
  padding: 8px 24px;
  border-radius: 5px;
  letter-spacing: 0.012rem;
}
.A_BurgerMenu {
  display: none;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  cursor: pointer;
  background: none !important;
}
.A_LogoYellow {
  width: 9.5rem;
  height: 1.2rem;
  background-image: url(images/af33941eb0a9c9203ea1.webp);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.A_LogoBlack {
  width: 9.5rem;
  height: 1.2rem;
  background-image: url(images/423d4bee7a3e997d668c.webp);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.A_HseLogo {
  width: 8rem;
  height: 4rem;
  background-image: url(images/33a64b4db793f62f8d38.webp);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.A_SocialNetworks {
  width: 2rem;
  height: 100%;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.tg {
  background-image: url(images/3c3dbc6765085fe528b3.webp);
}
.vk {
  background-image: url(images/beded6cfe6ed381c5c5d.webp);
}
.A_Icons {
  border-radius: 10px 0;
  width: 40px;
}

.A_Numbers {
  font-family: 'Siegra';
  font-size: 1.2rem;
  letter-spacing: 1%;
  width: 40px;
  min-width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1px 1px 0 0;
  border-radius: 10px 0;
}

.A_Input {
  width: 390px;
  padding: 12.5px;
  border: solid 1.5px var(--black);
  border-radius: 6px;
  background-color: var(--white);
}

.A_Search {
  width: 25px;
  height: 25px;
}
/*start*/

.A_ImgAbout {
  width: 50%;
}

.A_LevelIcon {
  width: 1.6rem;
  height: 1.4rem;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.A_LevelIconEasy {
  background-image: url(images/3e6545a5e0ae5b000c9d.svg);
}
.A_LevelIconMid {
  background-image: url(images/0385e81e6275ed17ac1c.svg);
}
.A_LevelIconHard {
  background-image: url(images/f45b305fc9704fdd15d0.svg);
}
.A_LevelIconEasyBlack {
  background-image: url(images/8fb37a7ae4a303e3c745.svg);
}
.A_LevelIconMidBlack {
  background-image: url(images/a3acdd392a6a3c7321a9.svg);
}
.A_LevelIconHardBlack {
  background-image: url(images/d6ef628d09e6b9cb3e60.svg);
}
.A_FilterTag {
  display: inline-flex;
  padding: 0.875rem 2rem;
  justify-content: center;
  align-items: center;
  gap: 0.625rem;
  border-radius: 0.375rem;
  border: 1px solid var(--grey, #6d6d6d);
  width: fit-content;
  color: var(--grey);
  font-size: 1.125rem;
  font-family: 'Inter-Regular';
  font-style: normal;
  font-weight: 600;
  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
  cursor: url(images/ac949e6ddda192201da4.svg) 1 1, pointer;

  &.active {
    background-color: var(--grey);
    color: var(--yellow);
  }
  &:hover {
    background-color: var(--grey);
    color: var(--yellow);
  }
}
.A_ArrowYellow {
  opacity: 0;
  visibility: hidden;
  width: 1.8rem;
  height: 1.8rem;
  background-image: url(images/68a2bc04f2863579de59.svg);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  transition: opacity 0.2s ease-in-out, color 0.2s ease-in-out;

  svg {
    path {
      fill: var(--yellow);
    }
  }
}
.A_ArticleCardPhoto {
  width: 100%;
}
.A_IconTimer {
  width: 1rem;
  height: 1.2rem;
}
.A_IconCover {
  width: 7%;
  height: 6rem;
  margin-left: 3.125rem;
  margin-top: -3.125rem;
  background-color: var(--yellow);
  border-radius: 1.125rem 0;
}
.A_IconCoverSkate {
  background-image: url(images/151092ddd4ee6e530925.svg);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.A_IconCoverLocation {
  background-image: url(images/ce0e6192039b525346e3.svg);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.A_IconCoverFile {
  background-image: url(images/d9aa4a32d4ecc5f0ecd2.svg);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.A_IconCoverSmile {
  background-image: url(images/c8ec8a69152aa5304401.webp);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.A_SpotOnePhoto {
  width: 48%;
}

.A_SpotsBigPhoto {
  padding: 0 163px;
  margin-top: 80px;
  width: 100%;
}

.A_SectionsBottomText {
  padding: 0 50px 120px 50px;
  text-align: center;
}
.A_ErrorText {
  font-family: 'Siegra';
  font-size: 140px;
  color: var(--midgrey);
}
.A_Arrow {
  width: 2.5rem;
  height: 2.5rem;
  background-image: url(images/d0c18d1bb217b54b7b6c.svg);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  position: absolute;
  top: 80vh;
  left: 49%;
  display: none;
  opacity: 1; /* Default opacity */
  pointer-events: auto;
  transition: opacity 0.3s ease;
}
.A_TestCoverImageMobile {
  display: none;
  width: calc(100% - 3.76rem);
  margin: 1.88rem 1.25rem 1rem 1.25rem;
}

.A_YellowBorder {
  width: 3.2rem;
  height: 9.25rem;
  border-radius: 1.875rem 0rem;
  background: var(--yellow, #f1fd53);
}

.A_TipsPhoto {
  width: 41.25rem;
  margin: 0 auto 3.12rem auto;
  display: flex;
}

.A_MusicIcon {
  width: 3rem;
}

.A_AlbumCover {
  width: 5.81rem;
}

@media screen and (max-width: 500px) {
  .A_Header0 {
    font-size: 2.6rem;
  }

  .A_Header1 {
    font-size: 1.75rem;
    text-align: left;
  }

  .A_Header2 {
    font-size: 1.75rem;
    line-height: 2.0125rem;
    letter-spacing: 0.0525rem;
  }

  .A_Header3 {
    font-size: 1.125rem;
    line-height: 1.29375rem;
    letter-spacing: 0.0225rem;
  }

  .A_HeaderCards {
    font-size: 2.1rem;
  }

  .A_BodyText {
    font-size: 1rem;
    line-height: 1.1875rem;
    letter-spacing: 0.01rem;
  }

  .A_FactText {
    font-size: 1rem;
  }

  .A_FactNumber {
    font-size: 4.6rem;
  }

  .A_Tag {
    font-size: 0.78rem;
    padding: 0.3125rem 1.25rem;
  }

  .A_Button {
    width: 100%;
  }

  .A_Input {
    width: 100%;
  }

  .A_IconCover {
    width: 6rem;
    height: 6rem;
    margin-left: 20px;
    position: absolute;
    left: 0;
    bottom: 0;
    transform: translateY(50%);
  }

  .A_FilterTag {
    font-size: 1rem;
    padding: 0.625rem 1.5rem;
  }

  .A_HeaderCards {
    font-size: 1.75rem;
    word-break: break-word;
    hyphens: auto;
  }

  .A_SectionsBottomText {
    font-size: 1.25rem;
    line-height: 1.4375rem;
  }
  .A_LogoYellow {
    width: 7rem;
  }
  .A_BurgerMenu {
    display: block;
  }
  .A_HseLogo {
    width: 6rem;
    height: 6rem;
  }

  .A_Arrow {
    display: block; /* Make the arrow visible on smaller screens */
  }
  /* Hidden class for hiding the arrow on scroll down */
  .A_Arrow.hidden {
    opacity: 0;
    pointer-events: none;
  }

  .A_HeaderTest {
    margin: 1.88rem 1.25rem 1rem 1.25rem;
  }

  .A_TestCoverImageMobile {
    display: block;
  }

  .A_TextAnnotation {
    font-size: 0.75rem;
    line-height: 0.8625rem;
    letter-spacing: 0.0075rem;
  }

  .A_YellowBorder {
    height: 6rem;
  }

  .A_Numbers {
    padding: 0.35156rem;
    min-width: 1.8rem;
    height: 1.8rem;
    border-radius: 0.39063rem 0rem;
  }

  .A_TipsPhoto {
    margin-inline: 1.25rem;
    width: calc(100% - 2.5rem);
  }

  .A_ImgAbout {
    width: calc(50% - 0.31rem);
  }

  .A_SpotsBigPhoto {
    margin-top: 1.88rem;
    padding: 0 1.25rem;
    width: 100%;
  }
}

/*
MOLECULES
_________________________________________________________________________________________
*/

.M_HeaderText {
  width: 35vw;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.M_ButtonArrow {
  display: flex;
  gap: 10px;
  align-items: center;
  text-decoration: none;

  .A_TextButton {
    color: var(--grey);
  }

  &:hover {
    .A_TextButton {
      color: var(--black);
    }

    svg {
      path {
        fill: var(--black);
      }
    }
  }
}

.M_Fact {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 31%;
}

.M_TricksHeaderColumn {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.M_TricksTextWithHeader {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.M_MailInput {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.M_HeaderWithIcon {
  display: flex;
  gap: 20px;
  align-items: center;
}

.M_ItalicText {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 34.375rem;

  h3 {
    color: var(--yellow);
  }
}

.M_LocationCardHeader {
  display: flex;
  flex-direction: column;
  gap: 15px;
  width: 100%;

  h4 {
    color: var(--yellow);
  }

  p {
    color: var(--white);
  }
}

.M_ListedParagraph {
  display: flex;
  gap: 20px;
}
.M_ArticleCardData {
  padding: 1.2rem 1.8rem;

  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}
.M_ArticleHeaderWithDescription {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  text-align: left;
  height: 50%;
  gap: 0.2rem;
  overflow: hidden;
}
.M_ArticleCardTags {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.M_Time {
  display: flex;
  flex-direction: row;
  gap: 0.6rem;
  align-items: center;
}
.M_TrickTags {
  display: flex;
  height: 1.5rem;
  flex-direction: row;
  justify-content: start;
  align-items: flex-start;
  gap: 0.3125rem;
}
.M_TrickTagsYellow {
  display: flex;
  width: fit-content;
  flex-direction: row;
  justify-content: start;
  align-items: flex-start;
  gap: 0.3125rem;
  background-color: var(--yellow);
  padding: 6px 24px;
  border-radius: 0.18rem;
}
.M_BannerTextWithButton {
  display: flex;
  width: 55%;
  flex-direction: column;
  gap: 1rem;
  align-items: flex-start;
}
.M_MetroInfoArrow {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.M_FunHeaderArrow {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-end;
  .A_HeaderCards {
    width: 70%;
  }
}
.M_HeaderPlusTag {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.M_HeaderWithTag {
  display: flex;
  flex-direction: row;
  padding: 0 50px;
  align-items: flex-start;
  gap: 14%;
  margin-top: 3.75rem;
  .A_Header1 {
    color: var(--black);
  }
  .A_Tag {
    height: fit-content;
  }
}
.M_SlangsTextWithHeader {
  display: flex;
  flex-direction: column;
  gap: 10px;
  display: flex;
  width: 41.25rem;
  padding: 0.1875rem 0rem;
  flex-direction: column;
  align-items: flex-start;
}
.M_FilmListedDescrip {
  display: flex;
  flex-direction: row;
  gap: 20px;
  align-items: center;
}

.M_SpotsCover {
  position: relative;
  width: 100%;
  padding: 0 163px 60px 163px;
  display: flex;
  height: 75vh;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 15px;
}

.M_SpotsCover > * {
  z-index: 2;
}
.M_MobileLogoMenu {
  display: none;
  width: 100%;
  flex-direction: row;
  justify-content: space-between;
}
@media screen and (max-width: 500px) {
  .M_MobileLogoMenu {
    display: flex;
  }
  .M_TricksTextWithHeader {
    flex-direction: column;
    gap: 1rem;
    .C_ListedParagrapgh {
      width: 100%;
    }
    .Q_HeaderWidth {
      width: 100%;
    }
    .A_BodyText {
      width: 100%;
    }
  }
  .M_Fact {
    width: 100%;
  }
  .M_HeaderWithTag {
    flex-direction: column;
    padding: 2rem 1.25rem 0 1.25rem;
    gap: 1.8rem;
  }
  .M_SlangsTextWithHeader {
    width: 100%;
  }
  .M_BannerTextWithButton {
    width: 100%;
  }
  .O_Form {
    padding: 0 10vw;
  }
  .M_HeaderText {
    width: 100%;
  }
}

.M_TextButton {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.M_QuestionHeader {
  display: flex;
  justify-content: space-between;
}

.M_AnswerCard {
  display: flex;
  min-width: 25rem;
  min-height: 7.75rem;
  padding: 2rem 1.75rem;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 0.625rem;
  flex: 1 0 0;
  border-radius: 0.625rem;
  border: 2px solid var(--white);
  color: var(--white);
  cursor: url(images/ac949e6ddda192201da4.svg) 1 1, pointer;

  &:hover {
    color: var(--yellow);
    border-color: var(--yellow);
  }

  &:active {
    background-color: var(--yellow);
    color: var(--black);
  }
}

.M_Annotation {
  display: flex;
  width: 41.25rem;
  align-items: center;
  gap: 1.4375rem;
  margin: 5rem auto;
}

.TipsListedParagraph {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

@media screen and (max-width: 500px) {
  .M_TextButton {
    gap: 1.88rem;
  }

  .M_QuestionHeader {
    flex-direction: column-reverse;
    gap: 1rem;
  }

  .M_AnswerCard {
    display: flex;
    width: 100%;
    height: fit-content;
    min-height: auto;
    min-width: 0;
    padding: 0.9375rem;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.625rem;
  }

  .M_Annotation {
    margin: 1.5rem 1.88rem;
    width: calc(100% - 3.76rem);
  }

  .M_SpotsCover {
    padding-inline: 1.25rem;
  }

  .M_ItalicText {
    gap: 0.8rem;
    width: 100%;
    padding-top: 11.25rem;
  }
}

/*
WRAPPERS
_________________________________________________________________________________________
*/

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

.W_BannerQuote {
  display: flex;
  align-items: center;
  border-radius: 1.25rem;
  padding: 5rem 5rem;
  justify-content: center;
  .A_Header2 {
    color: var(--white);
    text-align: center;
    width: 80%;
  }
}

.W_BannerAdress {
  padding: 88px 163px;
}

.W_BannerNumbers {
  display: flex;
  align-items: center;
  background-color: var(--black);
  height: 30vh;
  border-radius: 1.25rem;
}

.W_BannerQuestion {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: fit-content;
  padding: 44px 80px;
  margin: 80px 163px 0 163px;
  border-radius: 20px;
  width: auto;
  background-color: var(--black);

  p {
    color: var(--white);
  }

  img {
    width: 32%;
  }
}

.W_BannerSkateboards {
  width: 80%;
  display: flex;
  align-items: center;
  height: fit-content;
  justify-content: center;
  padding: 6% 10%;

  p {
    color: var(--white);
  }
}

.W_BannerCTA {
  display: flex;
  justify-content: center;
  flex-direction: column;
  height: 30vh;
  padding-left: 8%;
  gap: 15px;

  h2 {
    color: var(--white);
    width: 55%;
  }
}

.W_LocationMainHeader {
  margin: 0 30px;
  height: 80vh;
  display: flex;
  align-items: flex-end;
  border-radius: 50px 0;

  .M_TricksHeaderColumn {
    margin: 0 0 4% 8%;
    h1 {
      color: var(--white);
    }
  }
}

.W_Menu {
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: space-between;
}

.W_LocationCardInfo {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.W_LocationTextWithHeader {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 45%;
  .A_BodyText {
    color: var(--text);
  }
}

.W_FooterMenuLogo {
  display: flex;
  gap: 80px;
  justify-content: center;
  align-items: center;
}

.W_HseAuthors {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
/*start*/
.W_SectionCover {
  width: 100%;
  display: flex;
  flex-direction: column;
}
.W_HeaderWithFilter {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2rem 3.125rem 2rem 3.125rem;
}
.W_TrickTagsName {
  margin-top: 30%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  gap: 0.3125rem;
  padding-bottom: 2.5rem;
}
.W_AddressInfo {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.W_MetroInfo {
  width: 70%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 0.62rem;
}

.W_Form {
  display: flex;
  justify-content: space-between;
  gap: 16px;

  input {
    padding: 1rem 2rem;
    border-radius: 0.5vw;
    border: none;
  }

  input:focus {
    border: none;
    outline: none;
  }

  #email {
    background-color: var(--white);
    color: var(--black);
    width: 72%;
    border-radius: 0.375rem;
    border-bottom: 2px solid var(--black);
  }

  #email:focus {
    border: none;
    border-bottom: 2px solid var(--yellow);
  }

  #button:hover {
    color: var(--white);
  }
}

.W_TricksMainHeader {
  width: 100%;
  height: 65vh;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 0.625rem;
  flex-direction: column;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 0rem 10.1875rem;
  .A_Header1 {
    color: var(--black);
  }
}
.W_TricksSection1 {
  display: flex;
  flex-direction: column;
  gap: 5rem;
  padding: 3.37rem 10rem 0 10rem;
}
.W_TricksSection2 {
  display: flex;
  flex-direction: column;
  gap: 3.75rem;
  padding: 5rem 10rem 0 10rem;
}
.W_TricksSection3 {
  display: flex;
  flex-direction: column;
  gap: 5rem;
  padding: 3.75rem 10rem 0 10rem;
}
.W_TricksSection4 {
  display: flex;
  flex-direction: column;
  gap: 3.125rem;
  padding: 5rem 10rem 0 10rem;
}
.W_SlangsSection1 {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 60px 50px 0 50px;
}
.W_SlangsSection2 {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 80px 50px 0 50px;
  .C_ListedParagrapgh {
    width: 41.25rem;
  }
}
.W_SlangsSection3 {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 80px 50px 0 50px;
  gap: 3rem;
  .A_BodyText {
    width: 41.25rem;
  }
  .C_ListedParagrapgh {
    width: 41.25rem;
    .A_BodyText {
      width: 100%;
    }
  }
}
.W_FilmDescripWithHeader {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.W_SpotsBottomText {
  padding: 0 163px;
  margin-top: 49px;
  width: 70vw;
}
.W_MobileMenu {
  display: none;
  flex-direction: column;
  align-items: center;
  background-color: var(--black);
  gap: 20vh;
  padding: 20vh 0;
  height: 100vh;
}
.W_MenuTg {
  display: flex;
  flex-direction: row;
  gap: 5rem;
  align-items: center;
}
.W_ErrorHeader {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.W_TextButtonImg {
  margin: 0 10.19rem 5rem 10.19rem;
  display: flex;
  justify-content: space-between;
  gap: 6.63rem;
  align-items: center;

  img {
    width: 18.5rem;
  }
}

.W_TestResult {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

.W_TestResultText {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.W_ResultHeader {
  display: flex;
  flex-direction: column;
}

.W_ListItem {
  display: flex;
  width: 41.25rem;
  gap: 1.4375rem;
  margin: 0 auto 1.88rem auto;

  .A_Numbers {
    margin-top: 0.25rem;
  }
}

.W_TipsLinkTest {
  display: flex;
  width: 41.25rem;
  gap: 1.6rem;
  margin: 3.12rem auto 1.88rem auto;
  justify-content: center;

  .TipsListedParagraph {
    gap: 1.4rem;
  }

  a {
    width: 100%;
  }
}

.W_MusicLinks {
  width: 41.25rem;
  margin: 2.5rem auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

@media only screen and (max-width: 1380px) and (min-width: 501px) {
  .W_TrickTagsName {
    margin-top: 20%;
    gap: 1rem;
  }

  .W_TextButtonImg {
    /*margin: 1rem 1.25rem 1.88rem 1.25rem;*/

    img {
      display: none;
    }
  }

  /*.W_ListItem {
    margin-inline: 1.25rem;
    width: calc(100% - 2.5rem);
    gap: 0.62rem;
  }*/

  .W_TipsLinkTest {
    margin-inline: 1.25rem;
    width: calc(100% - 2.5rem);
  }

  .W_BannerAdress {
    padding: 2.5rem 1.25rem;
  }

  .W_BannerQuestion {
    margin: 2.5rem 1.25rem;
    padding: 1.88rem;
    flex-direction: column-reverse;
    gap: 2.5rem;

    img {
      width: 100%;
    }
  }

  .W_SpotsBottomText {
    padding: 0 1.25rem;
    width: 100%;
    margin-top: 1.88rem;
  }
  .W_Menu {
    display: flex;
  }
}
@media screen and (max-width: 500px) {
  .W_SectionCover {
    width: 100%;
    height: 40vh; /* Высота 40% от высоты окна */
    display: flex;
    flex-direction: column;
    position: relative; /* Для использования абсолютного позиционирования */
  }

  .W_HeaderWithFilter {
    padding: 80px 20px 30px 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
  .W_Menu {
    display: none;
  }
  .W_TricksMainHeader {
    height: 80vh;
    padding: 4rem 3.2rem;
    justify-content: flex-end;
    background-position: -60rem;
    .M_HeaderPlusTag {
      gap: 1rem;
    }
    .A_Header1 {
      font-size: 2.6rem;
    }
  }
  .W_TricksSection1,
  .W_TricksSection2,
  .W_TricksSection3,
  .W_TricksSection4,
  .W_SlangsSection1,
  .W_SlangsSection2,
  .W_SlangsSection3 {
    flex-direction: column;
    padding: 2rem 1.25rem 0 1.25rem;
    gap: 1.8rem;
    .Q_BodyTextWidth {
      width: 100%;
    }
    .C_ListedParagrapgh {
      width: 100%;
    }
    div.C_ListedParagrapgh + p {
      width: 100%;
    }
  }
  .W_BannerQuote {
    padding: 1.8rem 1.25rem;
    .A_Header2 {
      font-size: 1.2rem;
      line-height: 120%;
    }
  }
  .W_BannerNumbers {
    flex-direction: column;
    height: auto;
  }
  .W_BannerSkateboards {
    width: 100%;
  }
  .W_FooterMenuLogo {
    flex-direction: column;
    gap: 2rem;
  }
  .W_TrickTagsName {
    margin-top: 10%;
  }
  .W_Form {
    flex-direction: column;
    width: 100%;
    #email {
      width: 100%;
    }
  }
  .W_TextButtonImg {
    margin: 1rem 1.25rem 1.88rem 1.25rem;

    img {
      display: none;
    }
  }

  .W_ListItem {
    margin-inline: 1.25rem;
    width: calc(100% - 2.5rem);
    gap: 0.62rem;
  }

  .W_TipsLinkTest {
    margin-inline: 1.25rem;
    width: calc(100% - 2.5rem);
  }

  .W_BannerAdress {
    padding: 2.5rem 1.25rem;
  }

  .W_BannerQuestion {
    margin: 2.5rem 1.25rem;
    padding: 1.88rem;
    flex-direction: column-reverse;
    gap: 2.5rem;

    img {
      width: 100%;
    }
  }

  .W_SpotsBottomText {
    padding: 0 1.25rem;
    width: 100%;
    margin-top: 1.88rem;
  }
}
@media only screen and (max-width: 1380px) and (min-width: 501px) {
  .W_TrickTagsName {
    margin-top: 20%;
    gap: 1rem;
  }
}

/*
COLLECTIONS
_________________________________________________________________________________________
*/

.C_Tags {
  display: flex;
  gap: 10px;
}

.C_Facts {
  display: flex;
  justify-content: space-between;
  margin: 0 8%;
}

.C_TwoPhoto {
  display: flex;
  width: 35vw;
  gap: 20px;
}

.C_TwoPhotoMain {
  display: flex;
  width: 35vw;
  gap: 20px;
}

.C_HeaderMenuSections {
  display: flex;
  flex-direction: row;
  gap: 30px;

  *:hover {
    text-decoration: underline 2px;
  }
}

.C_HeaderMenuSectionsFooter {
  display: flex;
  flex-direction: row;
  gap: 30px;

  * {
    color: var(--white);
  }

  *:hover {
    text-decoration: underline 2px;
  }
}

.C_TricksPhotos {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.C_Social {
  height: 2rem;
  display: flex;
  gap: 20px;
}

.C_ListedParagrapgh {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 60%;
  gap: 20px;
}

.C_Cards {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  justify-content: space-between;
  column-gap: 1.25rem;
  row-gap: 1.88rem;
}

.C_Authors {
  display: flex;
  justify-content: flex-start;
  gap: 30px;

  p {
    color: var(--white);
    font-size: 1rem;
  }
}
/*start*/
.C_FilterTags {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}
.C_Films {
  display: flex;
  flex-direction: column;
  gap: 3.75rem;
  padding: 5rem 20% 0 20%;
}
.C_MobileMenuLinks {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  .A_Header2 {
    color: var(--white);
  }
}
.C_AnswerCards {
  display: flex;
  align-items: flex-start;
  align-content: flex-start;
  gap: 1.25rem 1.875rem;
  align-self: stretch;
  flex-wrap: wrap;
}

.C_Buttons {
  display: flex;
  gap: 0.62rem;
}

.C_ResultScore {
  display: flex;
}

.C_MusicIcons {
  display: flex;
  gap: 0.69rem;
}

.C_SongTextHead {
  display: flex;
  padding: 5rem 3.12rem 0 24.12rem;
}

.C_SongText {
  display: flex;
  padding: 0;
}

.C_Music {
  display: flex;
  flex-direction: column;
}

.C_Music .O_Song:nth-child(odd) {
  background-color: var(--white);
}

.C_Music .O_Song:nth-child(even) {
  background-color: var(--lightgrey);
}

.C_Music .O_Song:nth-child(even) .Q_BgGrey {
  background-color: var(--black);
  color: var(--yellow);
}

@media screen and (max-width: 500px) {
  .C_FilterTags {
    flex-wrap: wrap;
  }
  .C_Facts {
    flex-direction: column;
    padding: 2rem 1.25rem;
    justify-content: center;
    align-items: center;
    gap: 2.4rem;
  }
  .C_Films {
    padding: 2rem 1.25rem 0 1.25rem;
  }
  .C_Cards {
    flex-direction: column;
  }

  .C_Authors {
    gap: 10px;
  }
  .C_TwoPhotoMain {
    width: 120%;
    margin-left: 80px;
  }

  .C_AnswerCards {
    flex-direction: column;
    gap: 0.625rem;
  }

  .C_Buttons {
    flex-direction: column;
  }

  .C_TwoPhoto {
    gap: 0.62rem;
    width: calc(100% - 2.5rem);
  }
}

/*
ORGANISMS
_________________________________________________________________________________________
*/

.O_Header {
  position: fixed;
  top: 0;
  right: 12px;
  background-color: var(--black);
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  padding: 1.6rem 3.125rem;
  z-index: 1000;
  flex-direction: column;
  overflow: hidden;
  .W_Menu {
    .O_Search {
      display: flex;
      gap: 10px;
      height: 36px;
      justify-content: stretch;

      .A_SearchInput {
        padding: 0.625rem 0;
        border-bottom: 2px solid var(--white);
        background-color: var(--black);
        color: var(--white);
        border-radius: 0.375rem;

        &:focus {
          border-bottom: 2px solid var(--yellow);
        }
      }

      .A_SearchButton {
        padding: 0.625rem 1.5rem;
        background-color: var(--white);
        border-radius: 0.375rem;
        font-family: 'Inter-SemiBold';
        font-size: 1rem;
        font-style: normal;
        font-weight: 600;
        cursor: url(images/ac949e6ddda192201da4.svg) 1 1, pointer;

        &:hover {
          background-color: var(--yellow);
        }
      }
    }
    .A_ButtonSmall {
      position: relative; /* Add this line */
      display: inline-block; /* Ensures proper sizing */
      color: black;
      background-color: white;
      overflow: hidden; /* Ensures ::before stays within bounds */
      transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out;
      &::before {
        content: 'Гоу с нами!';
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        top: 0;
        left: -100%; /* Start position (hidden) */
        width: 100%;
        height: 100%;
        background-color: yellow;
        transition: left 0.5s ease-in-out;
        z-index: -1; /* Puts behind text */
      }
      &:hover {
        color: black; /* Keep text visible */
      }

      &:hover::before {
        left: 0; /* Slide in yellow color */
        z-index: 1;
      }
    }

    .C_HeaderMenuSections {
      .A_TextButton {
        color: var(--white);
        transition: text-decoration-color 0.2s ease-in-out,
          color 0.2s ease-in-out;
        &:hover {
          text-decoration-line: underline;
          text-decoration-style: solid;
          text-decoration-skip-ink: auto;
          text-decoration-color: var(--yellow);
        }
      }
    }
  }
}

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

.O_Cards {
  padding: 0 50px 120px;
}

.O_TrickCard {
  width: 31.5%;
  min-height: 32vh;
  background-color: var(--black);
  flex-direction: column;
  padding: 2rem 1.88rem;
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 0.8rem;
  border-radius: 50px 0;

  .M_TrickTags {
    .A_BodyText {
      color: var(--yellow);
    }
  }

  .A_HeaderCards {
    color: var(--white);
    text-align: left;
  }
  &:hover {
    .grey {
      transition: color 0.2s ease-in-out, color 0.2s ease-in-out;
      color: var(--grey);
    }
  }
}
.O_SmallBanner {
  width: 80%;
  min-height: 16.25rem;
  margin-top: 5rem;
  margin-bottom: 8rem;
  display: flex;
  padding: 2% 5%;
  flex-direction: row;
  justify-content: space-between;
  background-color: var(--black);
  border-radius: 1.25rem;

  .M_BannerTextWithButton {
    .A_HeaderCards {
      color: var(--white);
    }
  }
}
.O_LocationCard {
  height: 21.25rem;
  display: flex;
  flex-direction: column;
  border-radius: 1.875rem 0rem;
  overflow: hidden;
  padding: 1.88rem;
  background-position: center;
  background-repeat: no-repeat;
  justify-content: flex-end;
  text-align: left;
  z-index: 2;
  .A_BodyText {
    color: var(--white);
  }
  .A_HeaderCards {
    color: var(--white);
  }

  &:hover {
    .A_ArrowYellow {
      opacity: 1;
      visibility: visible;
    }
  }
}
.O_Mid {
  width: calc((100% - 1.25rem) / 2);
}
.O_Big {
  width: 100%;
}
.O_Small {
  width: 31.5%;
}
.O_FunCard {
  width: 31.5%;
  min-height: 35vh;
  display: flex;
  flex-direction: column;
  border-radius: 50px 0;
  overflow: hidden;
  padding: 1.88rem;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  justify-content: flex-end;
  text-align: left;
  gap: 10px;
  .A_HeaderCards {
    color: var(--white);
  }
  &:hover {
    .A_ArrowYellow {
      opacity: 1;
      visibility: visible;
    }
  }
}

.O_ArticleCard {
  min-height: 40vh;
  flex-direction: column;
  border-radius: 50px 0;
  overflow: hidden;
  background-color: var(--midgrey);
  justify-content: flex-start;
  transition: box-shadow 0.4s ease-in-out;
  .A_BodyText {
    color: var(--grey);
    font-style: italic;
  }
  &:hover {
    box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.3);
  }
}

.O_FooterMenuLogoSocial {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.O_Form {
  display: flex;
  flex-direction: column;
  gap: 40px;
  align-items: center;
  margin: 160px 0;

  .M_HeaderText {
    justify-content: center;
    text-align: center;
    width: 100vw;
  }
}

.O_Link {
  width: fit-content;
}
.O_Film {
  width: 100%;
  display: flex;
  flex-direction: row;
  gap: 2.5rem;
}
.O_FilmFooterBanner {
  display: flex;
  justify-content: center;
}
.O_HeaderMobile {
  background-color: red;
  display: none;
  position: sticky;
  top: 0;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  padding: 1.6rem 3.125rem;
  z-index: 1000;
}

.O_Test {
  margin: 0 10.19rem 7.5rem 10.19rem;
  padding: 4.38rem 5.62rem;
  border-radius: 3rem 0rem;
  background-color: var(--black);
  display: flex;
  flex-direction: column;
  gap: 4.88rem;
}

.O_Result {
  margin: 0 10.19rem 7.5rem 10.19rem;
  padding: 4.38rem 5.62rem;
  border-radius: 3rem 0rem;
  background-color: var(--black);
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 3.75rem;

  img {
    width: 35%;
    height: fit-content;
  }
}

@media screen and (max-width: 500px) {
  .O_HeaderMobile {
    display: flex;
  }

  .O_Header {
    right: 5px;
  }
}

.O_SpotsTextPhotos {
  display: flex;
  justify-content: space-between;
  padding: 0 163px;
  margin-top: 80px;
  align-items: center;
  gap: 20px;
}

.O_SpotsTexts {
  display: flex;
  justify-content: space-between;
  padding: 0 163px;
  margin-top: 80px;
  align-items: flex-start;
  gap: 20px;
}
.O_Error {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10%;
  flex-direction: column;
  gap: 40px;
  .A_Header1 {
    color: var(--black);
    text-align: center;

    .A_Header1 + .A_BodyText {
      width: 60%;
      text-align: center;
    }
  }
}
.O_Song {
  height: 9.4375rem;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1.81rem 2.88rem 1.81rem 13.3rem;
}

@media screen and (max-width: 500px) {
  .O_Cards {
    padding: 0 20px 120px;
  }
  .O_Mid {
    width: 100%;
  }
  .O_Big {
    width: 100%;
  }
  .O_Small {
    width: 100%;
  }
  .O_Test {
    margin: 0 1.25rem 1.88rem 1.25rem;
    padding: 1.88rem 1.25rem;
    border-radius: 1.875rem 0rem;
    gap: 1.25rem;
  }
  .O_Result {
    margin: 0 1.25rem 1.88rem 1.25rem;
    padding: 1.25rem 1.25rem 1.88rem 1.25rem;
    border-radius: 1.875rem 0rem;
    gap: 1.25rem;
    flex-direction: column;

    img {
      width: 100%;
      border-radius: 0.875rem 0 0 0;
    }
  }

  .O_SpotsTextPhotos {
    padding: 0 1.25rem;
    margin-top: 1.88rem;
    gap: 1.88rem;
    flex-direction: column;
    align-items: flex-start;

    & > * {
      width: 100%;
    }

    .C_TwoPhoto {
      order: 3;
    }

    .W_LocationTextWithHeader {
      order: 2;
    }

    .A_SpotOnePhoto {
      order: 3;
    }
  }

  .O_SpotsTexts {
    margin-top: 2.5rem;
    padding: 0 1.25rem;
    flex-direction: column;
    gap: 1.88rem;

    & > * {
      width: 100%;
    }
  }
  .O_SmallBanner {
    margin-top: 40px;
    flex-direction: column-reverse;
    min-height: auto;
    width: 100%;
    padding: 2rem 1.25rem;
    margin-top: 0;
    gap: 2rem;
    .A_ButtonSmall {
      width: 100%;
    }
  }
  .O_Film {
    align-items: center;
    flex-direction: column;
  }
  .O_FilmFooterBanner {
    padding: 4rem 1.25rem 0 1.25rem;
    margin-bottom: 4rem;
  }
  .O_FunCard {
    width: 100%;
  }
  .O_FooterMenuLogoSocial {
    flex-direction: column;
    align-items: center;
    gap: 2.4rem;
  }
  .O_TrickCard {
    width: 100%;
    min-height: auto;
  }
  .O_TextTwoPhotos {
    flex-direction: column;
    gap: 50px;
  }
  .O_LocationCard,
  .O_ArticleCard {
    min-height: 35vh;
  }
  .O_Form {
    .M_HeaderText {
      padding: 0 10vw;
    }
  }
  .O_Error {
    padding: 40% 10%;
    gap: 50px;
    .A_Header1 {
      font-size: 3rem;
    }
    .A_Header1 + .A_BodyText {
      width: 100%;
      text-align: center;
    }
  }
}
@media only screen and (max-width: 1024px) and (min-width: 501px) {
  .O_TrickCard {
    width: 48%;
    min-height: auto;
  }
  .O_ArticleCard,
  .O_LocationCard {
    min-height: 35vh;
  }

  .O_Small,
  .O_Mid,
  .O_FunCard {
    width: 48%;
  }
}
@media only screen and (max-width: 1380px) and (min-width: 1025px) {
  .O_TrickCard {
    min-height: auto;
  }
  .O_ArticleCard {
    min-height: 35vh;
  }
}

/*
SUPERORGANISMS
_________________________________________________________________________________________
*/

.S_MainCover {
  height: 145vh;
  padding: 16rem 50px 115px 50px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.S_MainSections {
  padding: 50px 50px 0 50px;
  margin-top: 50px;
  display: flex;
  flex-direction: column;
  gap: 50px;
}

.S_FooterWithCards {
  background-color: var(--midgrey);
  padding: 45px 0 80px 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 3.75rem;
  margin-top: 7.5rem;
  padding: 3.75rem 3.125rem 5rem 3.125rem;

  .O_ArticleCard {
    background-color: var(--white);
  }
}

.S_Footer {
  background-color: var(--black);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 2.2rem 3rem;
  min-height: 40vh;
  .O_FooterMenuLogoSocial {
    .W_FooterMenuLogo {
      .A_TextButton {
        color: var(--white);
        &:hover {
          text-decoration-line: underline;
          text-decoration-style: solid;
          text-decoration-skip-ink: auto;
          text-decoration-color: var(--yellow);
        }
      }
      .A_LogoYellow {
        width: 10rem;
        height: 1.5rem;
      }
    }
  }
}
@media screen and (max-width: 500px) {
  .S_Footer {
    padding: 3rem 2.4rem 2.4rem 2.4rem;
    p {
      font-size: 12px;
    }
  }
  .S_FooterWithCards {
    padding: 2rem 1.25rem 6rem 1.25rem;
  }
  .S_MainCover {
    height: 180vh;
    justify-content: flex-end;
    gap: 45vh;
  }
  .S_MainSections {
    .C_Cards:first-of-type > *:nth-child(-n + 3) {
      display: none !important;
    }
  }
}