* {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
     font-size: 10px;
 }

 html {
     scroll-padding-top: 115px;
 }

 :root {
     --text-small: 1.4rem;
     --text-medium: 1.8rem;
     --text-xl: 2.8rem;
     --text-large: 3rem;

     --color-accent: #4FAC25;
 }

 body {
     font-family: "Bebas Neue", sans-serif;
     font-style: normal;
     font-weight: 400;
     background-color: #000;
     color: #C0C3C2;
     overflow-x: hidden;
 }

 .container {
     max-width: 1270px;
     width: 100%;
     margin: auto;
 }

 video[controls] {
     outline: none;
     border: none;
 }

 video {
     outline: 0;
     border: 0;
     box-shadow: none;
 }

 video:focus {
     outline: 0 !important;
     box-shadow: none !important;
 }

 .hero {
     position: relative;
     width: 100%;
     max-height: 100vh;
     height: 100%;
     aspect-ratio: 16 / 8;
     -webkit-aspect-ratio: 16 / 8;
     overflow: hidden;
 }

 .section-title {
     font-size: var(--text-large);
     line-height: 1;
     color: var(--color-accent);
     letter-spacing: 0.5em;
     text-transform: uppercase;
     margin-bottom: 32px;
 }

 .reveal {
     opacity: 0;
     transform: translateY(40px);
     -webkit-transform: translateY(40px);
     transition: opacity 0.8s ease, transform 0.8s ease;
     -webkit-transition: opacity 0.8s ease, -webkit-transform 0.8s ease;
     will-change: opacity, transform;
 }

 .reveal.visible {
     opacity: 1;
     transform: translateY(0);
     -webkit-transform: translateY(0);
 }

 .hero::after {
     content: "";
     position: absolute;
     z-index: 999;
     width: 100%;
     height: 100%;
     left: 0;
     top: 0;
     background: linear-gradient(0deg, rgba(0, 0, 0, 0) 34.65%, #000000 110.8%), linear-gradient(180deg, rgba(0, 0, 0, 0) 50%, #000000 104.91%);
     background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 34.65%, #000000 110.8%), -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0) 50%, #000000 104.91%);
 }

 .hero video {
     position: absolute;
     top: 50%;
     left: 50%;
     width: 100%;
     height: 100%;
     object-fit: cover;
     -o-object-fit: cover;
     -webkit-object-fit: cover;
     transform: translate(-50%, -50%);
     -webkit-transform: translate(-50%, -50%);
     z-index: 0;
 }

 .overlay {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: url(../media/ui-elements/hero-filter.webp);
     background-size: 100%;
     -webkit-background-size: 100%;
     background-position: top;
     z-index: 1;
 }

 .hero-content {
     position: relative;
     z-index: 2;
     height: 100%;
     display: flex;
     display: -webkit-flex;
     flex-direction: column;
     -webkit-flex-direction: column;
     align-items: center;
     -webkit-align-items: center;
     justify-content: center;
     -webkit-justify-content: center;
     text-align: center;
 }

 .hero-content p {
     margin-top: 15px;
     font-size: 1.8rem;
     color: #ccc;
 }

 section {
     padding: 90px 0;
 }

 article.event__item,
 article.ad-commerce__item {
     position: relative;
     overflow: hidden;
 }

 article.event__item::before,
 article.ad-commerce__item::before {
     width: 100%;
     height: 101%;
     content: "";
     position: absolute;
     background: url(../media/ui-elements/portfolio-filter.webp);
     background-size: cover;
     -webkit-background-size: cover;
     background-position: bottom;
     opacity: 0;
     transition: opacity .7s ease;
     -webkit-transition: opacity .7s ease;
     pointer-events: none;
 }

 article.event__item:hover::before,
 article.ad-commerce__item:hover::before {
     opacity: 1;
 }

 img.video-poster {
     position: absolute;
     left: 0;
     right: 0;
     top: 0;
     bottom: 0;
     margin: auto;
     width: 100%;
     height: 100%;
     object-fit: cover;
     opacity: 1;
     transition: opacity .6s ease;
     border-radius: 20px;
 }

 article.event__item video,
 article.ad-commerce__item video {
     max-width: 100%;
     width: 100%;
     border-radius: 20px;
     object-fit: cover;
     -o-object-fit: cover;
     -webkit-object-fit: cover;
     height: 100%;
 }

 article.event__item:hover img.video-poster,
 .ad-commerce__item:hover img.video-poster {
     opacity: 0;
 }

 .event__info,
 .movie__info,
 .ad-commerce__info,
 .animation__info {
     display: flex;
     display: -webkit-flex;
     flex-direction: column;
     -webkit-flex-direction: column;
     position: absolute;
     bottom: 24px;
     left: 24px;
     transform: translateY(200%);
     -webkit-transform: translateY(200%);
     opacity: 0;
     transition: transform .7s ease, opacity .7s ease;
     -webkit-transition: -webkit-transform .7s ease, opacity .7s ease;
 }

 article.event__item:hover,
 article.movie__item:hover,
 article.ad-commerce__item:hover {
     cursor: pointer;
 }

 article.event__item:hover .event__info,
 article.ad-commerce__item:hover .ad-commerce__info {
     opacity: 1 !important;
     transform: translateY(0%);
     -webkit-transform: translateY(0%);
     pointer-events: none;
 }

 article.event__item:hover .video__play-btn,
 article.ad-commerce__item:hover .video__play-btn {
     opacity: 0;
     pointer-events: none;
 }

 .event__name,
 .ad-commerce__name {
     font-size: var(--text-large);
 }

 .event__category,
 span.event__position,
 .ad-commerce__category,
 span.ad-commerce__position {
     font-size: var(--text-medium);
     font-weight: normal;
     font-family: "Inter", sans-serif;
 }

 .event__category {
     font-family: "Bebas Neue", sans-serif;
     text-transform: uppercase;
 }

 span.ad-commerce__category {
     margin-bottom: 20px;
 }

 h4.movie__name {
     margin-bottom: 16px;
 }

 .event__studio,
 span.ad-commerce__studio {
     font-size: var(--text-medium);
     font-weight: 300;
     font-family: "Inter", sans-serif;
 }

 span.event__position {
     margin-top: 20px;
 }

 .video__play-btn {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     -webkit-transform: translate(-50%, -50%);
     width: 63px;
     height: 63px;
     border-radius: 50%;
     background: transparent;
     color: #fff;
     font-size: var(--text-xl);
     border: none;
     cursor: pointer;
     transition: all 0.3s ease;
     -webkit-transition: all 0.3s ease;
     z-index: 2;
     outline: none;
 }

 button.video__play-btn img {
     max-width: 48px;
 }

 .video__play-btn:hover {
     background: #000000;
     color: #000;
 }

 video {
     max-width: 100%;
 }

 .lightbox__video video {
     aspect-ratio: 16 / 9;
     -webkit-aspect-ratio: 16 / 9;
 }

 .lightbox__content {
     display: flex;
     display: -webkit-flex;
     gap: 30px;
     -webkit-gap: 30px;
     align-items: flex-start;
     -webkit-align-items: flex-start;
     color: #fff;
     flex-wrap: wrap;
     -webkit-flex-wrap: wrap;
 }

 .lightbox__info {
     flex: 1 1 35%;
     -webkit-flex: 1 1 35%;
 }

 .lightbox__video {
     flex: 1 1 60%;
     -webkit-flex: 1 1 60%;
     position: relative;
 }

 .lightbox__video video {
     width: 100%;
     border-radius: 10px;
     display: block;
     background: #000;
     object-fit: cover;
 }

 .lightbox__series {
     flex: 1 1 60%;
     -webkit-flex: 1 1 60%;
     max-width: calc((1200px - 29px * 2) - 40%);
     margin: auto;
     position: relative;
     display: flex;
     margin-right: 0;
 }

 .lightbox__series video {
     width: 100%;
     border-radius: 10px;
     cursor: pointer;
     opacity: 0.8;
     transition: opacity 0.3s, transform 0.3s, border-color .6s ease;
     -webkit-transition: opacity 0.3s, -webkit-transform 0.3s, border-color .6s ease;
     aspect-ratio: 16 / 9;
     -webkit-aspect-ratio: 16 / 9;
     object-fit: cover;
     -o-object-fit: cover;
     -webkit-object-fit: cover;
     border: 1px solid transparent;
 }

 .lightbox__series video:hover {
     opacity: 1;
     border: 1px solid var(--color-accent);
 }

 .lightbox__info h3 {
     font-size: 3.6rem;
     font-weight: 500;
 }

 .lightbox__info h4 {
     font-size: var(--text-xl);
     font-weight: 300;
 }

 .lightbox__position {
     margin-top: 23px;
 }

 video.series-video {
     height: 99%;
 }

 video.series-video.active {
     border: 1px solid var(--color-accent);
     height: 99%;
 }

 .lightbox__position,
 .lightbox__position span {
     font-family: "Inter", sans-serif;
     font-size: 1.8rem;
     font-weight: 300;
 }

 .lightbox__position span {
     font-weight: 600;
 }

 .lightbox__text {
     font-family: "Inter", sans-serif;
     font-size: var(--text-small);
     font-weight: 300;
     margin-top: 40px;
 }

 .swiper {
     width: 100%;
 }

 /* .swiper-slide {
     flex-shrink: 0;
     width: auto;
     max-width: 30%;
 } */

 .swiper-button-prev,
 .swiper-button-next {
     color: #ffffff;
     transition: opacity 0.3s;
     -webkit-transition: opacity 0.3s;
 }

 .swiper-button-prev:hover,
 .swiper-button-next:hover {
     opacity: 0.8;
 }

 .fancybox__content {
     background: transparent !important;
 }

 video#main-video {
     position: relative;
 }

 button.main-video__play-btn {
     position: absolute;
     left: 0;
     right: 0;
     top: 0;
     bottom: 0;
     margin: auto;
     width: fit-content;
     height: fit-content;
     background: transparent;
     border: none;
     padding: 20px;
     border-radius: 50%;
     display: flex;
     display: -webkit-flex;
     cursor: pointer;
 }

 .main-video__play-btn.hidden {
     display: none;
 }

 .swiper-button-next:after,
 .swiper-button-prev:after {
     color: #fff;
     width: 15px;
     height: 30px;
     font-size: 3rem !important;
 }

 .lightbox__series .swiper {
     height: fit-content;
 }

 .lightbox__series .swiper-button-next,
 .lightbox__series .swiper-rtl .swiper-button-prev {
     right: -35px;
     left: auto;
 }

 .lightbox__series .swiper-button-prev,
 .lightbox__series .swiper-rtl .swiper-button-next {
     left: -35px;
     right: auto;
 }

 .events__wrapper {
     display: grid;
     display: -ms-grid;
     grid-template-columns: repeat(4, 1fr);
     grid-template-rows: 615px 242px 242px;
     gap: 24px;
     -ms-grid-columns: repeat(4, 1fr);
     -ms-grid-rows: 615px 242px;
 }

 .events__wrapper {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     grid-template-rows: 615px 345px;
     gap: 24px;
 }

 .fancybox__content {
     width: 100%;
 }

 .events__wrapper article {
     border-radius: 20px;
     object-fit: cover;
     -o-object-fit: cover;
     -webkit-object-fit: cover;
 }

 .event__video {
     width: 100%;
     height: 100%;
     object-fit: cover;
     -o-object-fit: cover;
     -webkit-object-fit: cover;
     background-color: #000;
     display: block;
 }

 /* Большой верхний */
 .events__wrapper article:nth-of-type(1) {
     grid-column: 1 / 5;
     /* 4 колонки */
     grid-row: 1 / 2;
 }

 /* Левый нижний 1 */
 .events__wrapper article:nth-of-type(2) {
     grid-column: 1 / 3;
     grid-row: 2 / 3;
 }

 /* Левый нижний 2 */
 .events__wrapper article:nth-of-type(3) {
     grid-column: 3 / 5;
     grid-row: 2 / 3;
 }

 /* ПРАВЫЙ БОЛЬШОЙ (1/2 — 2/4) */
 .events__wrapper article:nth-of-type(4) {
     grid-column: 3 / 5;
     /* 2 колонки */
     grid-row: 2 / 4;
     /* 2 строки */
 }

 .fancybox__backdrop {
     background: rgb(0 0 0 / 92%) !important;
     backdrop-filter: blur(8px);
     -webkit-backdrop-filter: blur(8px);
 }

 section#movies,
 section#animation {
     background: #090B0F;
 }

 .movies__wrapper,
 .animation__wrapper {
     display: flex;
     display: -webkit-flex;
     flex-direction: row;
     -webkit-flex-direction: row;
     gap: 24px;
     -webkit-gap: 24px;
     flex-wrap: wrap;
     -webkit-flex-wrap: wrap;
 }

 .movie__item,
 .animation__item {
     width: calc(25% - 18px);
     position: relative;
     overflow: hidden;
 }

 .movie__poster-wrapper,
 .animation__poster-wrapper {
     position: relative;
     overflow: hidden;
 }

 h4.movie__name,
 h4.animation__name {
     font-size: var(--text-xl);
     line-height: 1;
     color: #B7B7B7;
 }

 .movie__position,
 .animation__position {
     font-size: var(--text-small);
     font-family: "Inter", sans-serif;
     font-weight: 600;
     color: #B7B7B7;
 }

 .event__item {
     position: relative;
     display: inline-block;
 }

 .event__video {
     display: block;
     width: 100%;
     height: auto;
     transition: all 0.3s ease;
     -webkit-transition: all 0.3s ease;
 }

 .event__item::after,
 .ad-commerce__item::after {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     /* background: rgb(0, 0, 0); */
     opacity: 0;
     transition: opacity 0.5s ease;
     -webkit-transition: opacity 0.5s ease;
     pointer-events: none;
     z-index: 1;
 }

 .event__item:hover::after,
 .ad-commerce__item:hover::after {
     animation: fadeAnim 3s ease;
 }

 @keyframes fadeAnim {
     0% {
         opacity: 1;
     }

     1% {
         opacity: 1;
     }

     100% {
         opacity: 0;
     }
 }

 .movie__studio,
 .animation__studio {
     font-family: "Inter", sans-serif;
     font-size: var(--text-small);
     font-weight: 400;
     color: #B7B7B7;
 }

 img.movie__poster,
 img.animation_poster {
     position: relative;
     pointer-events: none;
     max-width: 100%;
     transition: opacity 1s ease;
     -webkit-transition: opacity 1s ease;
 }

 .movie__item:hover img.movie__poster,
 .animation__item:hover img.animation__poster {
     opacity: 0.5;
 }

 .movie__item .movie__poster-wrapper,
 .animation__item .animation__poster-wrapper {
     position: relative;
     overflow: hidden;
     border-radius: 20px;
 }

 .movie__item img,
 .animation__item img {
     transition: transform .5s ease;
 }

 .movie__item:hover img,
 .animation__item:hover img {
     transform: scale(1.1);
 }

 .hero-content {
     opacity: 0;
     pointer-events: none;
 }

 .movie__item:hover .movie__info,
 .animation__item:hover .animation__info {
     opacity: 1 !important;
     transform: translateY(0%) !important;
     pointer-events: none !important;
     z-index: 3;
 }

 .movie__item img,
 .animation__item img {
     position: relative;
     width: 100%;
 }

 .movie__poster-wrapper::before,
 .animation__poster-wrapper::before {
     content: "";
     position: absolute;
     inset: 0;
     background: linear-gradient(360deg, #000000 12.19%, rgba(0, 0, 0, 0) 67.91%);
     opacity: 0;
     transition: opacity 0.3s ease;
     pointer-events: none;
     height: 102%;
     z-index: 2;
     border-radius: inherit;
     overflow: hidden;
     /* mix-blend-mode: multiply; */
 }

 .movie__poster-wrapper img,
 .animation__poster-wrapper img {
     display: flex;
     width: 100%;
     height: auto;
     position: relative;
     z-index: 1;
     object-fit: none;
 }

 .movie__item:hover .movie__poster-wrapper::before,
 .animation__item:hover .animation__poster-wrapper::before {
     opacity: 1;
     transition: opacity 0.3s ease;
 }

 .animation__item {
     border-radius: 20px;
     display: flex;
 }

 img.animation__poster {
     width: 100%;
     height: 99%;
     object-fit: cover;
     border-radius: 20px;
 }

 .ad-commerce__item::before {
     width: 100%;
     height: 101%;
     content: "";
     position: absolute;
     background: url(../media/ui-elements/portfolio-filter.webp);
     background-size: cover;
     background-position: bottom;
     opacity: 0;
     transition: opacity .7s ease;
     pointer-events: none;
 }

 .ad-commerce__item:hover .ad-commerce__info {
     opacity: 1 !important;
     transform: translateY(0%) !important;
     pointer-events: none !important;
     z-index: 3;
 }

 button.carousel__button.is-close svg {
     width: 32px;
     height: 32px;
 }

 .ad-commerce__wrapper {
     display: flex;
     flex-direction: column;
     gap: 24px;
 }

 .ad-commerce__wrapper-even {
     display: grid;
     grid-template-columns: 65% 32.7%;
     grid-auto-rows: 242px;
     gap: 24px;
 }

 .ad-commerce__wrapper-even article:nth-of-type(1) {
     grid-column: 1 / 2;
     grid-row: 1 / 3;
 }

 .ad-commerce__wrapper-even article:nth-of-type(2) {
     grid-column: 2 / 3;
     grid-row: 1 / 2;
 }

 .ad-commerce__wrapper-even article:nth-of-type(3) {
     grid-column: 2 / 3;
     grid-row: 2 / 3;
 }

 .ad-commerce__wrapper-even article:nth-of-type(4) {
     grid-column: 2 / 3;
     grid-row: 2 / 4;
 }

 .ad-commerce__wrapper-odd {
     display: grid;
     grid-template-columns: 32.7% 65%;
     grid-auto-rows: 242px;
     gap: 24px;
 }


 .ad-commerce__wrapper-odd article:nth-of-type(1) {
     grid-column: 1 / 1;
     grid-row: 1 / 2;
 }

 .ad-commerce__wrapper-odd article:nth-of-type(2) {
     grid-column: 1 / 2;
     grid-row: 2 / 3;
 }

 .ad-commerce__wrapper-odd article:nth-of-type(3) {
     grid-column: 2 / 3;
     grid-row: 1 / 3;
 }

 section#about {
     height: 666px;
     background: url(../media/images/about/About_Me.webp);
     background-size: contain;
     background-repeat: no-repeat;
     background-position: center right;
     padding: 0;
 }

 .about__info {
     margin: auto 0;
     display: flex;
     flex-direction: column;
     height: 666px;
     max-width: 750px;
     justify-content: center;
     -webkit-justify-content: center;
 }

 h2.about-title.section-title {
     margin-bottom: 34px;
 }

 p.about__text {
     font-family: 'Inter';
     font-style: normal;
     font-weight: 400;
     font-size: 16px;
     line-height: 22px;
     max-width: 750px;
 }

 a.contact__item {
     text-decoration: none;
 }

 a.contact__item span {
     font-family: 'Inter';
     font-style: normal;
     font-weight: 400;
     font-size: 16px;
     line-height: 19px;
     color: #d6d6d6;
 }

 a.contact__item {
     display: flex;
     gap: 8px;
     align-items: center;
     -webkit-align-items: center;
 }

 div#column-2 {
     gap: 15px;
 }

 .series__wrapper.swiper.no-swiper .swiper-wrapper {
     display: flex;
     gap: 16px;
     justify-content: space-between;
     -webkit-justify-content: space-between;
 }

 .no-swiper .swiper-slide {
     display: flex;
     flex-basis: calc(50% - 16px);
     max-width: 100vw;
     aspect-ratio: 16 / 9;
     height: 100%;
 }

 .series__wrapper.swiper.no-swiper {
     height: fit-content;
 }

 video.series-video {
     position: relative;
 }

 .series__wrapper .swiper-slide::after {
     width: 25px;
     height: 25px;
     content: "";
     position: absolute;
     left: 0;
     right: 0;
     top: 0;
     bottom: 0;
     background: url(/assets/media/ui-elements/play.png);
     background-size: contain;
     -webkit-background-size: contain;
     background-repeat: no-repeat;
     margin: auto;
     pointer-events: none;
 }

 .fancybox__content>.carousel__button.is-close {
     right: 30px !important;
 }

 /* .series__wrapper.swiper.no-swiper video.series-video {
     max-width: calc(50% - 12.5px);
 } */

 .series__wrapper.swiper.no-swiper .swiper-slide {
     max-width: calc(50% - 12.5px);
     width: 100% !important;
 }

 .lightbox__series:has(.no-swiper) {
     width: 100%;
 }

 .lightbox__series:has(.no-swiper) .swiper-slide {
     margin-left: 0 !important;
     padding: 0 !important;
 }

 .movie__poster-wrapper img,
 .animation__poster-wrapper img {
     object-fit: cover;
 }

 @media (max-width: 1400px) {

     .lightbox__content {
         display: grid;
         grid-template-columns: repeat(12, 1fr);
         grid-template-rows: repeat(10, 1fr);
     }

     .lightbox__info {
         grid-column: 1 / 6;
         grid-row: 1 / 10;
     }

     .lightbox__video {
         grid-column: 6 / 13;
         grid-row: 1 / 7;
     }

     .lightbox__series {
         grid-column: 6 / 13;
         grid-row: 7 / 10;
         margin-top: 0;
         margin-left: 0;
         max-width: 100%;
         width: calc(100% + 0);
     }

     .lightbox__series {
         margin-left: 0;
         position: relative;
         margin-left: auto;
         right: 0px;
         left: 0;
         width: 100%;
     }

     .lightbox__series video {
         aspect-ratio: 16 / 9;
     }

     .lightbox__series .swiper-slide {
         max-width: 271px;
         aspect-ratio: 16 / 9;
         max-height: 130px;
         width: 230px;
     }

     .no-swiper .swiper-slide {
         aspect-ratio: 16 / 9;
         max-height: 500px;
     }
 }

 @media (max-width: 1300px) {
     .container {
         max-width: 100vw;
         width: calc(100% - 50px * 2);
         margin: auto;
     }
 }

 @media (max-width: 1025px) {
     .lightbox__content {
         grid-template-columns: repeat(12, 1fr);
     }

     .lightbox__video {
         grid-column: 6 / 13;
         grid-row: 1 / 5;
     }

     .lightbox__series {
         grid-row: 6 / 10;
     }

 }

 @media (max-width: 1100px) {
     .lightbox__video {
         grid-column: 6 / 13;
         grid-row: 1 / 5;
     }

     .lightbox__series {
         grid-column: 6 / 13;
         grid-row: 5 / 10;
         margin-top: 0;
         margin-left: 0;
         max-width: 100%;
         width: calc(100% + 0);
     }

     .lightbox__series {
         margin-left: 0;
         position: relative;
         margin-left: auto;
         right: 0px;
         left: 0;
         width: 100%;
     }
 }

 @media (max-width: 1025px) {
     :root {
         --text-small: 1.4rem;
         --text-medium: 1.6rem;
         --text-large: 2.4rem;
     }

     .events__wrapper {
         display: flex;
         flex-direction: row;
         flex-wrap: wrap;
         gap: 49px 24px;
     }

     .events__wrapper article {
         flex-basis: calc(33% - 24px);
         height: 100%;
     }

     img.video-poster {
         aspect-ratio: 16 / 9;
         height: fit-content;
         margin: auto;
         width: 102%;
         margin-top: -1px;
         margin-left: -1px;
         border-radius: 15px;
     }

     .event__info,
     .movie__info,
     .ad-commerce__info,
     .animation__info {
         display: flex;
         flex-direction: column;
         -webkit-flex-direction: column;
         position: static;
         bottom: 24px;
         left: 24px;
         transform: none;
         opacity: 1;
         transition: transform .7s ease, opacity .7s ease;
     }

     article.event__item,
     article.ad-commerce__item {
         position: relative;
         overflow: visible;
         border-radius: 20px;
     }

     article.event__item video,
     article.ad-commerce__item video {
         aspect-ratio: 16 / 9;
         object-fit: cover;
         height: fit-content;
     }

     .events__wrapper article:nth-of-type(1) {
         position: relative;
     }

     article.event__item video,
     article.ad-commerce__item video {
         border-radius: 15px;
     }

     .video__play-btn {
         position: absolute;
         top: 0;
         width: 100%;
         height: fit-content;
         aspect-ratio: 16 / 9;
         left: 50%;
         right: 0;
         margin: auto;
         transform: translate(-50%, 0%);
         -webkit-transform: translate(-50%, 0%);
         border-radius: 0;
     }

     button.video__play-btn img {
         max-width: 36px;
     }

     .event__info,
     .movie__info,
     .ad-commerce__info,
     .animation__info {
         margin-top: 16px;
     }

     .event__name,
     .ad-commerce__name {
         font-size: var(--text-large);
         font-weight: 300;
         font-family: "Bebas Neue", sans-serif;
         line-height: 1.4;
     }

     .event__category {
         font-size: 2rem;
         font-weight: 300;
     }

     span.event__position,
     .ad-commerce__category,
     span.ad-commerce__position,
     .event__studio {
         font-family: "Inter", sans-serif;
         font-size: 1.4rem;
         line-height: 1.5;
     }

     .ad-commerce__wrapper-even,
     .ad-commerce__wrapper-odd {
         display: flex;
         flex-direction: row;
         flex-wrap: wrap;
     }

     .ad-commerce__wrapper-even article,
     .ad-commerce__wrapper-odd article {
         flex-basis: calc(100% / 3 - 16px);
         display: flex;
         display: -webkit-flex;
         flex-direction: column;
         -webkit-flex-direction: column;
     }

     section {
         padding: 90px 0 90px 0;
     }

     p.about__text {
         font-size: var(--text-medium);
         line-height: 1.44;
         max-width: 51vw;
     }

     h4.movie__name,
     h4.animation__name {
         font-size: 2.4rem;
         line-height: 1;
         color: #B7B7B7;
         font-weight: 400;
     }

     .section-title {
         margin-bottom: 3.6rem;
     }

     artice.animation__item.clickable-item {
         display: flex;
         flex-direction: column;
         -webkit-flex-direction: column;
         border-radius: 0;
     }

     .fancybox__carousel .fancybox__slide .fancybox__content {
         max-width: calc(100vw - 49px * 2) !important;
         padding: 24px 0px;
     }

     video.series-video {
         height: 100%;
     }

     span.event__position {
         margin-top: 18px;
     }

     section#about {
         background-size: cover;
     }

     .movie__item .movie__poster-wrapper {
         border-radius: 10px;
     }

     .animation__item .animation__poster-wrapper {
         border-radius: 20px;
     }

     .lightbox__series .swiper-button-prev,
     .lightbox__series .swiper-rtl .swiper-button-next,
     .lightbox__series .swiper-button-next,
     .lightbox__series .swiper-rtl .swiper-button-prev {
         display: none;
     }

     .fancybox__slide {
         padding: 0 !important;
     }

     .lightbox__series {
         margin-top: -132px;
     }

     .lightbox__series {
         flex: 1 1 60%;
         max-width: 65%;
         margin-left: 40.6%;
         position: relative;
     }

     .lightbox__text {
         margin-top: 30px;
     }

     .movie__poster-wrapper img,
     .animation__poster-wrapper img {
         object-fit: cover;
     }

     .swiper-slide {
         flex-shrink: 0;
         width: auto;
         /* ← Правильно */
         height: auto;
         position: relative;
         transition-property: transform;
         display: block;
     }

     article.event__item::before,
     article.ad-commerce__item::before {
         width: 100%;
         height: 100%;
         opacity: 0;
         background-position: bottom;
         min-height: 184px;
         height: fit-content;
         aspect-ratio: 16 / 9;
     }

     .movie__poster-wrapper img,
     .animation__poster-wrapper img {
         object-fit: cover;
     }
 }



 @media (max-width: 769px),
 (max-height: 500px) {

     html {
         scroll-padding-top: 56px;
     }

     .container {
         max-width: 100vw;
         width: calc(100% - 16px * 2);
         margin: auto;
     }

     section.hero {
         aspect-ratio: 9 / 16;
         -webkit-aspect-ratio: 9 / 16;
         max-height: 70dvh;
     }

     .overlay {
         background-size: cover;
     }

     .section-title {
         font-size: 1.6rem;
     }

     article.event__item,
     article.ad-commerce__item {
         width: 100%;
         flex-basis: 100%;
     }

     .movie__item,
     .animation__item {
         width: calc(50% - 8px);
         position: relative;
         overflow: hidden;
     }

     h4.movie__name,
     h4.animation__name {
         font-size: 1.8rem;
         line-height: 1;
         color: #B7B7B7;
         font-weight: 400;
         margin-bottom: 14px;
     }

     .movie__position,
     .animation__position {
         font-size: 1.2rem;
         font-family: "Inter", sans-serif;
         font-weight: 600;
         color: #B7B7B7;
     }

     span.movie__studio {
         font-size: 1.2rem;
         font-weight: 400;
     }

     .ad-commerce__item::before {
         width: 100%;
         height: fit-content;
         aspect-ratio: 16 / 9;
         -webkit-aspect-ratio: 16 / 9;
         opacity: 0.7 !important;
     }

     span.ad-commerce__category {
         font-family: "Bebas Neue", sans-serif !important;
         font-size: 2rem;
         font-weight: 300;
         text-transform: uppercase !important;
         margin-bottom: 10px;
     }

     span.event__position,
     span.ad-commerce__position,
     .event__studio {
         font-family: "Inter", sans-serif;
         font-size: 1.4rem;
         line-height: 1.5;
         font-weight: 600;
     }

     .lightbox__info {
         max-width: 100%;
     }

     span.event__studio {
         font-weight: normal;
     }

     span.event__position {
         margin-top: 17px;
     }

     .event__category {
         text-transform: uppercase;
         font-family: "Bebas Neue", sans-serif !important;
     }

     .event__name,
     .ad-commerce__name {
         font-size: 2.8rem;
         font-weight: 400;
     }

     p.about__text {
         max-width: 100vw;
         width: 100%;
         position: initial;
     }

     p.about__text {
         font-size: 1.2rem;
     }

     .about__info {
         height: fit-content;
     }

     section#about {
         background-position: bottom;
         height: 496px;
     }

     h2.contacts-title.section-title {
         margin-bottom: 2rem !important;
     }

     .fancybox__carousel .fancybox__slide .fancybox__content {
         max-width: calc(100vw - 32px) !important;
         padding: 24px 0px;
     }

     .lightbox__content {
         display: flex;
     }

     .lightbox__video {
         flex: auto;
         order: 1;
         padding-bottom: 0px;
     }

     .lightbox__info {
         flex: auto;
         order: 3;
     }

     .lightbox__series {
         flex: auto;
         max-width: 100% !important;
         margin: auto;
         order: 2;
     }

     .lightbox__series {
         width: 100vw;
         right: 0;
         max-width: 100vw !important;
         left: 0px;
         margin-top: 16px;
     }

     video.series-video {
         aspect-ratio: 16 / 9;
         -webkit-aspect-ratio: 16 / 9;
         object-fit: cover;
     }

     .series__wrapper.swiper.no-swiper .swiper-wrapper {
         display: flex;
         gap: 16px;
         justify-self: flex-start;
         -webkit-justify-content: flex-start;
     }

     .lightbox__series .swiper-slide {
         padding-left: 0;
         aspect-ratio: 16 / 9;
     }

     /* .lightbox__series .swiper-slide:last-child {
         padding-right: 16px;
     } */

     .no-swiper .swiper-slide {
         display: flex;
         flex-basis: calc(50% - 8px);
         max-width: calc(50% - 8px);
         max-height: 386px;
     }

     .series__wrapper.swiper.no-swiper .swiper-slide {
         max-width: calc(50% - 8px);
         width: 100% !important;
     }

     section {
         padding: 34px 0 34px 0;
     }

     section#movies,
     section#animation {
         padding: 40px 0;
     }

     .movies__wrapper,
     .animation__wrapper {
         gap: 16px;
     }

     .lightbox__series:has(.no-swiper) {
         width: 100%;
         gap: 16px;
         justify-content: start;
     }

     video#main-video {
         position: relative;
         outline: none;
         object-fit: cover;
         max-width: calc(100vw - 32px);
     }

     .movie__item .movie__poster-wrapper,
     .animation__item .animation__poster-wrapper {
         border-radius: 10px;
     }

     article.event__item video,
     article.ad-commerce__item video {
         border-radius: 15px;
     }

     section#about {
         padding-top: 34px;
     }

     .lightbox__info h3 {
         font-size: 2.8rem;
     }

     .lightbox__info h4 {
         font-size: 2rem;
     }

     .lightbox__position span,
     p.lightbox__position {
         font-size: 1.4rem;
     }

     p.lightbox__position {
         font-weight: 300;
         margin-top: 15px;
     }

     p.lightbox__text {
         font-size: 1.2rem;
         line-height: 1.5rem;
         margin-top: 32px;
     }

     .fancybox__slide {
         padding: 48px 16px 16px 16px;
     }

     h4.ad-commerce__name {
         font-size: 2.8rem;
         font-weight: 400;
     }

     img.animation__poster {
         border-radius: 10px;
     }

     .movie__poster-wrapper img,
     .animation__poster-wrapper img {
         object-fit: contain;
     }

     .movie__item:hover .movie__poster-wrapper::before,
     .animation__item:hover .animation__poster-wrapper::before {
         opacity: 0;
         transform: none;
     }

     h2.about-title.section-title {
         margin-bottom: 20px;
     }

     section#about {
         height: 900px;
         background: url(../media/images/about/About_Me_Mobile.webp);
         background-repeat: no-repeat;
         background-position: bottom;
     }

     .series__wrapper .swiper-slide::after {
         width: 30px;
         height: 30px;
     }

     .video__play-btn {
         position: absolute;
         top: 0;
         width: 100%;
         height: fit-content;
     }

     button.video__play-btn img {
         max-width: 48px;
     }

     button.video__play-btn img {
         width: 48px;
         height: 48px;
     }

     article.event__item video,
     article.ad-commerce__item video {
         min-height: 184px;
         height: fit-content;
     }

     .fancybox__content>.carousel__button.is-close {
         right: 0px !important;
     }

     textarea#message::placeholder {
         font-size: 12px;
     }

     img.video-poster {
         border-radius: 15px;
         aspect-ratio: 16 / 9;
         height: fit-content;
         top: 0;
         margin: auto;
         bottom: unset;
         width: 100%;
         left: -1px;
         top: -1px;
         border-radius: 15px;
         width: calc(100% + 3px);
     }

     video#main-video {
         aspect-ratio: 16 / 9;
         height: fit-content;
         width: fit-content;
         object-fit: contain;
     }
 }

 @media (max-width: 1025px) and (min-width: 768px) {
     .lightbox__series {
         flex: 1 1 60%;
         max-width: calc(100% - 35% + 12px);
         margin-left: 0;
         position: relative;
         margin-left: auto;
         right: -50px;
         top: 55px !important;
     }

     .lightbox__series .swiper-slide {
         padding-left: 24px;
         aspect-ratio: 16 / 9;
     }

     /* .lightbox__series .swiper-slide:last-child {
         padding-right: 50px;
         width: calc(100% + 50px) !important;
         max-width: 271px;
     } */

     .lightbox__series .swiper-slide:first-child {
         /* padding-left: 0; */
         margin-left: -24px;
     }

     .lightbox__content {
         display: grid;
         grid-template-columns: repeat(12, 1fr);
         grid-template-rows: auto auto auto auto;
         /* 4 строки */
         gap: 24px;
     }

     .lightbox__info {
         grid-column: 1 / 6;
         /* колонки 1–5 */
         grid-row: 1 / 5;
         /* вся левая часть по высоте */
     }

     .lightbox__video {
         grid-column: 6 / 13;
         /* колонки 6–12 */
         grid-row: 1 / 3;
         /* верхняя часть справа */
     }


     .lightbox__series {
         grid-column: 6 / 13;
         grid-row: 4 / 5;
         margin-top: 0;
         margin-left: 0;
         max-width: calc(100% + 49px);
         width: calc(100% + 0);
         top: 0 !important;
     }

     .lightbox__series {
         grid-column: 6 / 13;
         grid-row: 3 / 5;
         margin-top: 0;
     }


     .lightbox__series {
         margin-left: 0;
         position: relative;
         margin-left: auto;
         right: -50px;
         left: 0;
         width: calc(100% + 49px);
     }

     .lightbox__series video {
         aspect-ratio: 16 / 9;
     }

     .lightbox__series .swiper-slide {
         max-width: 271px;
         aspect-ratio: 16 / 9;
         max-height: 130px;
         width: 230px;
     }

     /* .lightbox__series .swiper-slide:last-child {
         max-height: 130px;
         height: 130px;
     } */

     .swiper-slide--spacer {
         pointer-events: none;
         user-select: none;
     }

     /* 
     .series__wrapper .swiper-slide:last-child::after {
         display: none;
     } */


     .series__wrapper .swiper-slide::after {
         width: 25px;
         height: 25px;
         content: "";
         position: absolute;
         left: 25px;
         right: 0;
         top: 0;
         bottom: 0;
         background: url(/assets/media/ui-elements/play.png);
         background-size: contain;
         -webkit-background-size: contain;
         background-repeat: no-repeat;
         margin: auto;
         pointer-events: none;
         margin: auto;
     }
 }

 @media (max-width: 900px) {
     .lightbox__content {
         flex-direction: column;
     }

     /* .lightbox__series {
         top: -6vw !important;
     } */

     /* .lightbox__series .swiper-slide:last-child {
         max-height: 108px;
         height: 130px;
     } */

     .fancybox__content>.carousel__button.is-close {
         right: 0px !important;
     }

     /* .lightbox__series {
         top: 0vw !important;
     } */

     /* .lightbox__series .swiper-slide:last-child {
         max-width: 240px;
         aspect-ratio: 16 / 9;
         max-height: 100px;
     } */
 }

 @media (max-width: 880px) {
     .lightbox__series {
         top: -5vw !important;
     }
 }

 @media (max-width: 820px) {
     .lightbox__series {
         top: -8vw !important;
     }
 }

 @media (max-width: 810px) {
     .fancybox__content .lightbox__series {
         top: -8vw !important;
     }
 }

 @media (max-width: 769px) {
     .lightbox__series {
         top: 0 !important;
         position: unset;
     }

     /* .lightbox__series .swiper-slide:last-child {
         max-height: 268px;
         height: 100%;
         max-width: 271px !important;
         max-height: 130px;
         width: 100% !important;
         padding: 0 !important;
     } */

 }

 @media (orientation: landscape) and (max-height: 500px) {
     .fancybox__content {
         padding-top: 70px !important;
     }

     button.carousel__button.is-close {
         top: 20px !important;
         left: calc(100% - 32px);
     }

     article.event__item {
         flex-basis: calc(50% - 12px);
     }


     article.ad-commerce__item {
         flex-basis: calc(33% - 14px);
     }

     img.video-poster {
         aspect-ratio: 16 / 9;
         height: fit-content;
         position: absolute;
         top: 0;
         bottom: unset;
         border-radius: 15px;
     }

     h4.movie__name,
     h4.animation__name {
         font-size: 1.8rem;
         line-height: 1;
         color: #B7B7B7;
         font-weight: 400;
         margin-bottom: 14px;
     }

     /* nav.mobile-menu,
     .mobile-menu__contacts {
         padding-left: 40px;
     } */

     .burger-menu .container {
         flex-direction: row !important;
         align-items: end;
     }

     .movie__item,
     .animation__item {
         width: calc(25% - 18px);
         position: relative;
         overflow: hidden;
     }

     video#main-video {
         aspect-ratio: 16 / 9;
         height: fit-content;
         width: fit-content;
         object-fit: contain;
         max-width: 55vw;
     }

     .movie__item,
     .animation__item {
         width: calc(25% - 12px);
         position: relative;
         overflow: hidden;
     }

     section#about {
         background: url(../media/images/about/About_Me.webp);
         background-size: contain;
         background-repeat: no-repeat;
         background-position: center right;
         padding: 0;
     }

     p.about__text.reveal.visible {
         max-width: 50%;
     }

     .about__info {
         height: 100vh;
     }

     .ad-commerce__item img.video-poster {
         min-height: 184px;
     }

     section.hero {
         aspect-ratio: 9 / 16;
         -webkit-aspect-ratio: 9 / 16;
         max-height: 80dvh;
     }
 }

 @media (min-width: 2000px) {
     section.hero {
         max-width: 1370px;
         margin: auto;
         max-height: 800px;
     }

     section#about {
         height: 731px;
         background: url(../media/images/about/About_Me.webp);
         background-size: contain;
         background-repeat: no-repeat;
         background-position: center right;
         padding: 0;
         max-width: 1270px;
         margin: auto;
     }
 }