@font-face {
  font-family: "Neue Machina";
  src: url("../fonts/NeueMachina-Regular.eot");
  src: local("Neue Machina Regular"), local("NeueMachina-Regular"), url("../fonts/NeueMachina-Regular.eot?#iefix") format("embedded-opentype"), url("../fonts/NeueMachina-Regular.woff2") format("woff2"), url("../fonts/NeueMachina-Regular.woff") format("woff"), url("../fonts/NeueMachina-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Neue Machina";
  src: url("../fonts/NeueMachina-Medium.eot");
  src: local("Neue Machina Medium"), local("NeueMachina-Medium"), url("../fonts/NeueMachina-Medium.eot?#iefix") format("embedded-opentype"), url("../fonts/NeueMachina-Medium.woff2") format("woff2"), url("../fonts/NeueMachina-Medium.woff") format("woff"), url("../fonts/NeueMachina-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Neue Machina";
  src: url("../fonts/NeueMachina-Bold.eot");
  src: local("Neue Machina Bold"), local("NeueMachina-Bold"), url("../fonts/NeueMachina-Bold.eot?#iefix") format("embedded-opentype"), url("../fonts/NeueMachina-Bold.woff2") format("woff2"), url("../fonts/NeueMachina-Bold.woff") format("woff"), url("../fonts/NeueMachina-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  border-radius: 0;
  text-decoration: none;
  list-style: none;
  font-feature-settings: "pnum" on, "lnum" on, "liga" off, "kern" off;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

select,
input,
button {
  -webkit-appearance: none;
  -moz-appearance: none;
}

select,
button,
input[type=submit] {
  cursor: pointer;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

*:focus {
  outline: transparent;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type=number] {
  -moz-appearance: textfield;
}

b, strong {
  font: inherit;
  color: inherit;
  font-weight: 700;
}

table {
  border-collapse: collapse;
}

main {
  overflow: hidden;
}

* {
  font-family: "Neue Machina", sans-serif;
  color: #FFF;
  line-height: 140%;
}

.header {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  background: linear-gradient(0deg, rgba(17, 17, 17, 0) 0%, rgba(17, 17, 17, 0.49) 100%);
  padding: 20px 0 60px;
}
.header .container {
  width: calc(100% - 32px);
  max-width: 1320px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.header__logo img {
  display: block;
  height: 40px;
  width: auto;
}
.header__menu ul {
  display: flex;
  gap: 50px;
}
.header__menu a {
  color: #F8F8F8;
  font-size: 13px;
  line-height: 110%;
  text-transform: uppercase;
}
.header__btn {
  display: block;
  padding: 12px 20px;
  background: #FF771D;
  border: none;
  color: #F8F8F8;
  font-size: 14px;
  font-weight: 400;
  line-height: 120%;
  text-transform: uppercase;
}
@media screen and (min-width: 1025px) {
  .header__mobMenuBtn {
    display: none;
  }
}
.header__mobMenuContainer {
  display: none;
}

.etPage {
  background: #110E0E;
}

.anim {
  opacity: 0.01;
  transition: 1s;
}
.anim.animated {
  opacity: 1;
}

.bgPage {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center bottom;
}

.block1 {
  padding: 140px 0 70px;
}
@media screen and (max-width: 1024px) {
  .block1 {
    padding: 130px 0 24px;
  }
}
.block1 .container {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: calc(100% - 32px);
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 2;
}
.block1__title {
  font-size: 51px;
  font-weight: 500;
  line-height: 110%;
}
@media screen and (max-width: 1024px) {
  .block1__title {
    font-size: 38px;
    line-height: 1.2;
    letter-spacing: -0.76px;
  }
}
.block1__description {
  color: #D3D3D3;
  font-size: 16px;
  text-transform: uppercase;
}
@media screen and (max-width: 1024px) {
  .block1__description {
    font-size: 14px;
  }
}
.block1__img {
  position: absolute;
  z-index: -1;
  top: 50%;
  transform: translate(0, -50%);
  max-width: 100%;
}
.block1__img-left {
  right: 100%;
}
@media screen and (max-width: 1024px) {
  .block1__img-left {
    display: none;
  }
}
.block1__img-right {
  left: 100%;
}
@media screen and (max-width: 1024px) {
  .block1__img-right {
    left: 50%;
    transform: translate(-50%, -50%);
  }
}

.block2 .container {
  width: calc(100% - 52px);
  max-width: 1280px;
  margin: 0 auto;
}
@media screen and (min-width: 1451px) and (max-height: 750px) {
  .block2 .container {
    max-width: 1100px;
  }
}
@media screen and (max-width: 1450px) {
  .block2 .container {
    max-width: 1100px;
  }
}
@media screen and (min-width: 1025px) and (max-width: 1450px) and (max-height: 630px) {
  .block2 .container {
    max-width: 980px;
  }
}
@media screen and (max-width: 1024px) {
  .block2 .container {
    max-width: 332px;
  }
}
.block2 .done {
  transition: 0.5s;
}
.block2__slider {
  cursor: none;
}
.block2 .swiper-wrapper {
  width: -moz-max-content;
  width: max-content;
  will-change: transform;
  transform: translate3d(0, 0, 0);
}
.block2 .swiper-slide {
  transform: translate3d(0, 0, 0);
  cursor: pointer;
  will-change: transform;
}
@media screen and (max-width: 1024px) {
  .block2 .swiper-slide {
    transform: translate3d(0, 0, 0) !important;
  }
}
.block2 .swiper-slide .slide-far-right {
  transition: 0.5s;
}
@media screen and (min-width: 1025px) {
  .block2 .swiper-slide .slide-far-right {
    transform: rotate(-6deg) !important;
    opacity: 0.5;
  }
  .block2 .swiper-slide .slide-far-right:hover {
    opacity: 0.6;
  }
}
.block2 .swiper-slide .slide-far-left {
  transition: 0.5s;
  transform: none !important;
}
@media screen and (min-width: 1025px) {
  .block2 .swiper-slide .slide-far-left {
    transform: rotate(6deg) !important;
    opacity: 0.5;
  }
  .block2 .swiper-slide .slide-far-left:hover {
    opacity: 0.6;
  }
}
.block2 .swiper-slide-prev .cardItem__windContainer.done {
  transform: translate3d(0, 0, 0) !important;
}
@media screen and (min-width: 1025px) {
  .block2 .swiper-slide-prev .cardItem__windContainer.done {
    transform: rotate(-6deg) !important;
    opacity: 0.8;
  }
  .block2 .swiper-slide-prev .cardItem__windContainer.done:hover {
    opacity: 0.9;
  }
}
.block2 .swiper-slide-active .cardItem__windContainer.done {
  transform: translate3d(0, 0, 0) !important;
}
@media screen and (min-width: 1025px) {
  .block2 .swiper-slide-active .cardItem__windContainer.done {
    transform: scale(1.11) !important;
  }
}
.block2 .swiper-slide-next .cardItem__windContainer.done {
  transform: translate3d(0, 0, 0) !important;
}
@media screen and (min-width: 1025px) {
  .block2 .swiper-slide-next .cardItem__windContainer.done {
    transform: rotate(6deg) !important;
    opacity: 0.8;
  }
  .block2 .swiper-slide-next .cardItem__windContainer.done:hover {
    opacity: 0.9;
  }
}
.block2__bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  padding: 70px 0 100px;
}
@media screen and (max-width: 1024px) {
  .block2__bottom {
    padding-top: 24px;
    gap: 24px;
  }
}
.block2__bottom .btn {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #F8F8F8;
  font-size: 18px;
  font-weight: 500;
  line-height: 120%;
  text-transform: uppercase;
  padding: 20px 28px;
  background: #FF771D;
  border: none;
  transition: 0.4s;
}
.block2__bottom .btn.disabled {
  opacity: 0.6;
  pointer-events: none;
}
@media not all and (pointer: coarse) {
  .block2__bottom .btn:hover {
    background: #ff8c44;
  }
}
.block2__bottom .btn:active {
  background: #ff893d;
}
.block2__bottom .btn svg {
  display: block;
  width: 24px;
  height: 24px;
}
.block2 .cardsCounter {
  color: #D3D3D3;
  text-align: center;
  font-size: 16px;
  font-weight: 400;
  line-height: 27px;
  text-transform: uppercase;
}
.block2 .cardsCounter span {
  font: inherit;
  color: inherit;
}
.block2 .cursor {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 99px;
  border: 2px solid rgba(255, 255, 255, 0.15);
  background: #FF771D;
  color: #F8F8F8;
  font-size: 14px;
  font-weight: 400;
  line-height: 120%;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 0.5s;
}
@media screen and (max-width: 1024px) {
  .block2 .cursor {
    display: none;
  }
}
.block2 .cursor.visible {
  opacity: 1;
}

.block3 {
  padding-bottom: 100px;
}
.block3 .container {
  width: calc(100% - 32px);
  max-width: 1416px;
  margin: 0 auto;
}
.block3 .btn {
  padding: 40px 16px;
  border-radius: 30px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  text-align: center;
  overflow: hidden;
  position: relative;
  z-index: 2;
  transition: 0.4s;
}
@media screen and (max-width: 1024px) {
  .block3 .btn {
    border-radius: 16px;
    gap: 32px;
  }
}
.block3 .btn:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgba(244, 115, 31, 0.12) 0%, rgba(244, 115, 31, 0.4) 100%);
  z-index: -1;
}
.block3 .btn__title {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
  transition: 0.4s;
}
@media screen and (max-width: 1024px) {
  .block3 .btn__title {
    font-size: 20px;
  }
}
.block3 .btn__text {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.block3 .btn__text p {
  color: #FF771D;
  font-size: 16px;
  font-weight: 500;
  line-height: 120%;
  text-transform: uppercase;
  transition: 0.4s;
}
@media screen and (max-width: 1024px) {
  .block3 .btn__text p {
    font-size: 14px;
  }
}
.block3 .btn__text svg {
  display: block;
}
@media screen and (max-width: 1024px) {
  .block3 .btn__text svg {
    width: 22px;
    height: auto;
  }
}
.block3 .btn__text svg * {
  transition: 0.4s;
}
.block3 .btn__svg {
  display: block;
  position: absolute;
  left: calc(50% + 275px);
  top: 50%;
  transform: translate(0, -45%);
  transition: all 0.4s, transform 1s;
  opacity: 0;
}
@media not all and (pointer: coarse) {
  .block3 .btn:hover {
    background: #FF771D;
  }
  .block3 .btn:hover .btn__text p {
    color: white;
  }
  .block3 .btn:hover .btn__text svg rect {
    fill: white;
  }
  .block3 .btn:hover .btn__text svg path {
    stroke: #FF771D;
  }
  .block3 .btn:hover .btn__svg {
    transform: translate(0, -50%);
    opacity: 1;
  }
}

.swiper-slide:not(.swiper-slide-active) .cardItem__preview * {
  pointer-events: none;
}

.cardItem {
  position: relative !important;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 12px;
  transform: rotateY(180deg);
  will-change: transform;
}
.cardItem.open .cardItem-front {
  content-visibility: visible;
}
@media screen and (max-width: 1024px) {
  .cardItem__windContainer {
    transform: none !important;
  }
}
.cardItem.open {
  transform: rotateY(0);
}
.cardItem.details .cardItem__main {
  opacity: 1 !important;
  pointer-events: auto !important;
}
.cardItem.details .cardItem__preview {
  opacity: 0 !important;
  pointer-events: none !important;
}
.cardItem-back, .cardItem-front {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.cardItem-back {
  z-index: 33;
  position: relative;
  transform: rotateY(180deg);
  border-radius: 12px;
}
.cardItem-back-img {
  display: block;
  width: 100%;
  padding-bottom: 150%;
}
.cardItem-back:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  z-index: 3;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 12px;
  background-image: url(../img/card_back.webp);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  border: 1px solid rgba(255, 255, 255, 0.15);
  transition: 0.3s;
}
.cardItem-front {
  position: absolute;
  z-index: 2;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 12px;
  background: #0A0909;
  content-visibility: auto;
  contain-intrinsic-size: 332px 484px;
}
.cardItem-front > * {
  position: relative;
  z-index: 2;
}
.cardItem-front:before {
  content: "";
  position: absolute;
  z-index: 1 !important;
  pointer-events: none;
  display: block;
  left: 7px;
  top: 0;
  width: calc(100% - 14px);
  height: 100%;
  background-image: url("../img/bg.svg");
  background-size: contain;
  background-position: top center;
  background-repeat: no-repeat;
}
.cardItem__num {
  font-size: 27px;
  line-height: 1;
  text-align: center;
  position: absolute;
  left: 50%;
  top: 12px;
  transform: translate(-50%, 0);
}
@media screen and (max-width: 1450px) {
  .cardItem__num {
    font-size: 20px;
    top: 10px;
  }
}
.cardItem__main {
  padding: 64px 44px 48px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  transition: 0.5s;
  border-radius: 12px;
}
@media screen and (max-width: 1450px) {
  .cardItem__main {
    padding: 40px 40px 48px;
  }
}
@media screen and (max-width: 1024px) {
  .cardItem__main {
    padding: 64px 48px 48px;
  }
}
@media screen and (max-width: 360px) {
  .cardItem__main {
    padding: 36px;
  }
}
.cardItem__main-top {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cardItem__main-top:before {
  display: block;
  width: 25px;
  height: 16px;
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='25' height='12' viewBox='0 0 25 12' fill='none'%3E%3Cpath d='M24.5714 12H13.0582V5.6747C13.0582 2.45783 15.8353 0 23.1001 0H24.4059V2.98193H23.5783C20.1206 2.98193 18.7412 4.19277 18.7412 5.54819H24.5714V12ZM11.5133 12H0V5.6747C0 2.45783 2.77716 0 10.0419 0H11.3477V2.98193H10.5201C7.06245 2.98193 5.68306 4.19277 5.68306 5.54819H11.5133V12Z' fill='%23FF771D'/%3E%3C/svg%3E");
}
@media screen and (max-width: 1450px) {
  .cardItem__main-top:before {
    zoom: 0.8;
  }
}
.cardItem__main-top p {
  color: #D3D3D3;
  font-size: 12px;
  font-weight: 400;
  line-height: 150%;
  text-transform: uppercase;
}
@media screen and (max-width: 1450px) {
  .cardItem__main-top p {
    font-size: 10px;
  }
}
@media screen and (min-width: 1025px) and (max-width: 1450px) and (max-height: 630px) {
  .cardItem__main-top p {
    font-size: 9px;
  }
}
@media screen and (max-width: 360px) {
  .cardItem__main-top p {
    font-size: 8px;
  }
}
.cardItem__main-top ul {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
@media screen and (max-width: 1450px) {
  .cardItem__main-top ul {
    gap: 8px;
  }
}
.cardItem__main-top ul li {
  display: flex;
  align-items: center;
  gap: 12px;
}
@media screen and (max-width: 1450px) {
  .cardItem__main-top ul li {
    gap: 8px;
  }
}
.cardItem__main-top ul li:not(:last-child):after {
  content: "|";
  color: #D3D3D3;
  font-size: 12px;
  font-weight: 400;
  line-height: 150%;
  text-transform: uppercase;
  opacity: 0.1;
}
@media screen and (max-width: 1450px) {
  .cardItem__main-top ul li:not(:last-child):after {
    font-size: 10px;
  }
}
.cardItem__main-top ul a {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #FF771D;
  font-size: 12px;
  font-weight: 400;
  line-height: 120%;
  text-decoration: underline;
  text-transform: uppercase;
  transition: 0.4s;
}
@media screen and (max-width: 1450px) {
  .cardItem__main-top ul a {
    font-size: 10px;
    gap: 8px;
  }
}
@media not all and (pointer: coarse) {
  .cardItem__main-top ul a:hover {
    text-decoration-color: transparent;
  }
}
.cardItem__main-top ul a:after {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M14 8.66667V12.6667C14 13.0203 13.8595 13.3594 13.6095 13.6095C13.3594 13.8595 13.0203 14 12.6667 14H3.33333C2.97971 14 2.64057 13.8595 2.39052 13.6095C2.14048 13.3594 2 13.0203 2 12.6667V3.33333C2 2.97971 2.14048 2.64057 2.39052 2.39052C2.64057 2.14048 2.97971 2 3.33333 2H7.33333M14 2L8 8M14 2H10M14 2V6' stroke='%23FF771D' stroke-opacity='0.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  display: block;
  width: 16px;
  height: 16px;
  opacity: 1 !important;
}
@media screen and (max-width: 1450px) {
  .cardItem__main-top ul a:after {
    zoom: 0.8;
  }
}
.cardItem__main-top ul a svg {
  display: block;
}
@media screen and (max-width: 1450px) {
  .cardItem__main-top ul a svg {
    width: 14px;
  }
}
.cardItem__main-bottom {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
@media screen and (max-width: 1450px) {
  .cardItem__main-bottom {
    gap: 12px;
  }
}
.cardItem__main-author {
  display: flex;
  align-items: center;
  gap: 10px;
}
@media screen and (max-width: 1450px) {
  .cardItem__main-author {
    gap: 8px;
  }
}
.cardItem__main-author .img {
  width: 40px;
  height: 40px;
  background: #222;
  border-radius: 99px;
  overflow: hidden;
}
@media screen and (max-width: 1450px) {
  .cardItem__main-author .img {
    width: 36px;
    height: 36px;
  }
}
.cardItem__main-author .img img, .cardItem__main-author .img svg {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.cardItem__main-author .txt {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
@media screen and (max-width: 1450px) {
  .cardItem__main-author .txt {
    gap: 2px;
  }
}
.cardItem__main-author .txt p {
  color: #FFF;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.2;
}
@media screen and (max-width: 1450px) {
  .cardItem__main-author .txt p {
    font-size: 14px;
  }
}
.cardItem__main-author .txt span {
  color: #FFF;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.2;
  opacity: 0.7;
}
@media screen and (max-width: 1450px) {
  .cardItem__main-author .txt span {
    font-size: 10px;
  }
}
.cardItem__main-shareBtn {
  align-self: center;
  color: #F8F8F8;
  font-size: 12px;
  font-weight: 400;
  line-height: 120%;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: transparent;
  -webkit-backdrop-filter: blur(3px);
          backdrop-filter: blur(3px);
  transition: 0.4s;
}
.cardItem__main-shareBtn:before {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M2 8C2 8.53043 2.21071 9.03914 2.58579 9.41421C2.96086 9.78929 3.46957 10 4 10C4.53043 10 5.03914 9.78929 5.41421 9.41421C5.78929 9.03914 6 8.53043 6 8C6 7.46957 5.78929 6.96086 5.41421 6.58579C5.03914 6.21071 4.53043 6 4 6C3.46957 6 2.96086 6.21071 2.58579 6.58579C2.21071 6.96086 2 7.46957 2 8Z' stroke='%23F8F8F8' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M10 4C10 4.53043 10.2107 5.03914 10.5858 5.41421C10.9609 5.78929 11.4696 6 12 6C12.5304 6 13.0391 5.78929 13.4142 5.41421C13.7893 5.03914 14 4.53043 14 4C14 3.46957 13.7893 2.96086 13.4142 2.58579C13.0391 2.21071 12.5304 2 12 2C11.4696 2 10.9609 2.21071 10.5858 2.58579C10.2107 2.96086 10 3.46957 10 4Z' stroke='%23F8F8F8' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M10 12C10 12.5304 10.2107 13.0391 10.5858 13.4142C10.9609 13.7893 11.4696 14 12 14C12.5304 14 13.0391 13.7893 13.4142 13.4142C13.7893 13.0391 14 12.5304 14 12C14 11.4696 13.7893 10.9609 13.4142 10.5858C13.0391 10.2107 12.5304 10 12 10C11.4696 10 10.9609 10.2107 10.5858 10.5858C10.2107 10.9609 10 11.4696 10 12Z' stroke='%23F8F8F8' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M5.7998 7.13337L10.1998 4.8667' stroke='%23F8F8F8' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M5.7998 8.8667L10.1998 11.1334' stroke='%23F8F8F8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  width: 16px;
  height: 16px;
  display: block;
  transition: 0.4s;
}
.cardItem__main-shareBtn:after {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M2 8C2 8.53043 2.21071 9.03914 2.58579 9.41421C2.96086 9.78929 3.46957 10 4 10C4.53043 10 5.03914 9.78929 5.41421 9.41421C5.78929 9.03914 6 8.53043 6 8C6 7.46957 5.78929 6.96086 5.41421 6.58579C5.03914 6.21071 4.53043 6 4 6C3.46957 6 2.96086 6.21071 2.58579 6.58579C2.21071 6.96086 2 7.46957 2 8Z' stroke='%23FF771D' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M10 4C10 4.53043 10.2107 5.03914 10.5858 5.41421C10.9609 5.78929 11.4696 6 12 6C12.5304 6 13.0391 5.78929 13.4142 5.41421C13.7893 5.03914 14 4.53043 14 4C14 3.46957 13.7893 2.96086 13.4142 2.58579C13.0391 2.21071 12.5304 2 12 2C11.4696 2 10.9609 2.21071 10.5858 2.58579C10.2107 2.96086 10 3.46957 10 4Z' stroke='%23FF771D' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M10 12C10 12.5304 10.2107 13.0391 10.5858 13.4142C10.9609 13.7893 11.4696 14 12 14C12.5304 14 13.0391 13.7893 13.4142 13.4142C13.7893 13.0391 14 12.5304 14 12C14 11.4696 13.7893 10.9609 13.4142 10.5858C13.0391 10.2107 12.5304 10 12 10C11.4696 10 10.9609 10.2107 10.5858 10.5858C10.2107 10.9609 10 11.4696 10 12Z' stroke='%23FF771D' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M5.7998 7.13337L10.1998 4.8667' stroke='%23FF771D' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M5.7998 8.8667L10.1998 11.1334' stroke='%23FF771D' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  width: 16px;
  height: 16px;
  display: block;
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translate(0, -50%);
  transition: 0.4s;
  opacity: 0;
}
@media screen and (max-width: 1450px) {
  .cardItem__main-shareBtn {
    font-size: 10px;
    gap: 8px;
  }
}
@media not all and (pointer: coarse) {
  .cardItem__main-shareBtn:hover {
    border-color: #FF771D;
    color: #FF771D;
  }
  .cardItem__main-shareBtn:hover:before {
    opacity: 0;
  }
  .cardItem__main-shareBtn:hover:after {
    opacity: 1;
  }
}
.cardItem__main .exit-btn {
  position: absolute;
  right: 0;
  top: 0;
  transform: translate(50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 40px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  background: rgba(255, 255, 255, 0.05);
  -webkit-backdrop-filter: blur(3px);
          backdrop-filter: blur(3px);
  cursor: pointer;
  transition: 0.4s;
}
.cardItem__main .exit-btn:before {
  content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3e%3cpath d='M18 6L6 18' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3e%3c/path%3e%3cpath d='M6 6L18 18' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3e%3c/path%3e%3c/svg%3e");
  width: 24px;
  height: 24px;
}
@media not all and (pointer: coarse) {
  .cardItem__main .exit-btn:hover {
    background: rgba(255, 255, 255, 0.1);
  }
}
.cardItem__preview {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 0 !important;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 16px;
  padding: 48px;
  transition: 0.5s;
}
@media screen and (max-width: 1450px) {
  .cardItem__preview {
    padding: 36px 36px 48px;
  }
}
.cardItem__preview:before {
  content: "";
  position: absolute;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 64px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 100%);
  border-radius: 12px 12px 0 0;
}
.cardItem__preview:after {
  content: "";
  position: absolute;
  z-index: 1;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 240px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000 69.99%);
  border-radius: 0 0 12px 12px;
}
.cardItem__preview * {
  position: relative;
  z-index: 3;
}
.cardItem__preview img {
  display: block;
  position: absolute;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 12px;
}
.cardItem__preview .txt {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
}
.cardItem__preview .txt h3 {
  font-size: 16px;
  font-weight: 500;
  line-height: 110%;
}
@media screen and (max-width: 1450px) {
  .cardItem__preview .txt h3 {
    font-size: 14px;
  }
}
.cardItem__preview .txt p {
  color: #D3D3D3;
  font-size: 12px;
  font-weight: 400;
  line-height: 150%;
  text-transform: uppercase;
}
@media screen and (max-width: 1450px) {
  .cardItem__preview .txt p {
    font-size: 10px;
  }
}
.cardItem__preview .btn {
  align-self: center;
  color: #F8F8F8;
  font-size: 12px;
  font-weight: 400;
  line-height: 120%;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: transparent;
  -webkit-backdrop-filter: blur(3px);
          backdrop-filter: blur(3px);
  transition: 0.4s;
}
@media screen and (max-width: 1450px) {
  .cardItem__preview .btn {
    font-size: 10px;
  }
}
@media not all and (pointer: coarse) {
  .cardItem__preview .btn:hover {
    border-color: #FF771D;
    color: #FF771D;
  }
}