@media screen and (min-width: 1441px){
    .gallery{
        width: 100%;
        margin: 0 auto;

    }
    .gallery__item{
        height: 300px;
    }
    .gallery__item img{
        height: 100%;
        object-fit: cover;
    }

    .gallery__list--bottom .gallery__item:first-child{
        width: 151px;
    }
    .gallery__list--bottom .gallery__item:last-child{
        width: 151px;
    }

}
@media screen and (max-width: 1440px){
    .gallery__list--top .gallery__item:nth-child(n+4) {
        display: none;
    }
    .gallery__list--bottom .gallery__item:nth-child(n+4) {
        display: none;
    }
    .gallery__list--bottom .gallery__item:last-child {
        display: flex;
    }
}
@media screen and (max-width: 1340px){
    .container{
        padding-left: 30px;
        padding-right: 30px;
    }
    .banner__right{
        max-width: calc(100% - 731px);
        width: 100%;
    }
    .about__left{
        max-width: 650px;
    }
    .about__right{
        max-width:calc(100% - 700px);
    }
}
@media screen and (max-width: 1240px){
    .banner__left{
        max-width: 600px;

    }
    .banner__right{
        max-width: calc(100% - 600px);
    }
    .main-direction__item{
        max-width: 680px;
        border-radius: 8px;
    }
    .main-direction__item:nth-child(2), .main-direction__item:nth-child(3), .main-direction__item:nth-child(6){
        max-width: calc(100% - 700px);

    }
    .main-direction__item:first-child:before,  .main-direction__item:nth-child(4):before,  .main-direction__item:nth-child(5):before{
        background-size: 44%;
    }
    .main-direction__item:nth-child(3):before, .main-direction__item:nth-child(2):before, .main-direction__item:nth-child(6):before{
        background-size: 60%;
    }
    .product__bottom .price{
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    .product__left{
        max-width: 700px;

    }
    .product__right{
        max-width: calc(100% - 740px);
    }
    .product__color--item{
        max-height: 80px;
        height: auto;
    }
    .product__item{

        display: flex;
        flex-direction: column;
    }
    .product__info{
        flex: 1 0 auto;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    .product__item img{
        height: 100%;
        object-fit: cover;
    }
    .banner__left {
        position: relative;
        z-index: 1;
    }
}
@media screen and (max-width: 1100px){
    .main-direction__item{
        max-width: 600px;
    }
    .main-direction__item:nth-child(2), .main-direction__item:nth-child(3), .main-direction__item:nth-child(6){
        max-width: calc(100% - 620px);

    }
    .training__item:nth-child(2){
        margin-top: 120px;
    }
    .training__item:nth-child(3) {
        margin-top: -120px;
    }
    .about__left {
        max-width: 500px;
    }
    .about__right{
        max-width:calc(100% - 550px);
    }
    .tradition__item img{
        bottom: -60px;
    }
    .commander__left{
        width: 500px;
    }
    .commander__right {
        width: calc(100% - 550px);
    }
    .socials__left{
        max-width: 500px;
    }
    .socials__content{
        padding-bottom: 50px;
    }
    .socials__right{
        right: 0;
    }
    .contact__left{
        max-width: 500px;
    }
    .contact__right{
        max-width: calc(100% - 550px);
    }
    .contact__left img{
        height: 100%;
        object-fit: cover;
    }
    .menu__link{
        font-size: 18px;
    }
    .header__logo{
        width: 120px;
    }
    .menu{
        margin-left: 165px;
    }
    .banner__title{
        font-size: 48px;
    }
    .banner .btn__white{
        width: 250px;
        padding-left: 30px;
        padding-right: 30px;
    }
    .btn__outline{
        width: 250px;
        padding-left: 30px;
        padding-right: 30px;
    }
    .banner__right {
        max-width: calc(100% - 500px);
    }
    .get__left{
        max-width: 550px;
    }
    .get__right{
        max-width: calc(100% - 570px);
    }
    .become--rec .become__item:last-child .btn__white{
        width: 100%;
        padding-left: 20px;
        padding-right: 20px;
    }
    .photo__content{
        width: calc(100% - 60px);
    }
    .photo__list{
        width: 100%;
    }
    .photo__item{
        width: calc(100% / 3 - 8px);
    }
    .top-news__content{
        margin-bottom: 0;
    }
    .product__left{
        max-width: 600px;

    }
    .product__right{
        max-width: calc(100% - 640px);
    }
    .product__gallery--item{
        height: 100px;
    }

}
@media screen and (max-width: 1024px){
    .menu{
        display: none;
    }
    .btn__menu{
        display: flex;
        margin-left: auto;
    }
    .header__socials{
        margin-left: 20px;
    }
    .btn__menu svg{
        width: 40px;
        height: 40px;
    }
    .btn__menu svg path{
        stroke: #A3A3A3;
    }
    .menu.active{
        display: flex;
        flex-direction: column;
        position: fixed;
        left: 0;
        width: 100%;
        top: 100px;
        margin-left: 0;
        background: #0e0f11;
        z-index: 1;
        height: 100%;
        padding-top: 50px;
    }
    header.active{
        position: fixed;
        z-index: 1;
    }
    body.no-scroll{
        overflow: hidden;
    }
    .header__logo{
        z-index: 2 ;
    }
    header     .menu__link {
        font-size: 20px;
    }
    .section__title{
        font-size: 38px;
    }
    .tradition__item{
        height: 350px;
        padding: 30px 20px;
    }
    .become__title{
        text-align: center;
    }
    .become__item{
        padding-left: 10px;
        padding-right: 10px;
    }
    .socials__right{
        max-width: 400px;
    }
    .socials__left{
        max-width: calc(100% - 400px);
    }
    .footer__menu{
        gap: 10px 50px;
    }
    .news__list{
        padding-bottom: 20px;
    }
    .news__list .swiper-pagination{
        bottom: 0;
        align-items: center;
        display: flex;
        justify-content: center;

    }
    .tradition__list{
        padding-bottom: 120px;
    }
    .swiper-pagination-bullet{
        width: 8px;
        height: 8px;
        background: #A3A3A3;
        border-radius: 0;
        opacity: 1;
    }
    .swiper-pagination-bullet-active{
        width: 10px;
        height: 10px;
        background: #E6E6E6;

    }
    .get__left {
        max-width: 500px;
    }
    .get__right {
        max-width: calc(100% - 520px);
    }
    .top-news__left {
        max-width: 450px;
        width: 100%;
    }
    .top-news__left img{
        max-width: 500px;

    }
    .top-news__right{
        max-width: calc(100% - 450px);
    }
    .top-news__content{
        gap: 20px;
    }
    .tradition__item img{
        height: 300px;
        /* max-width: 332px; */
        width: 90%;
        object-fit: cover;
        border-radius: 8px;
    }
    .product__left {
        max-width: 550px;
    }
    .product__right {
        max-width: calc(100% - 550px);
    }
    .product__gallery--right{
        height: 450px;
    }
    .product__gallery--right img{
        height: 100%;
        object-fit: cover;
    }
    .product__gallery--left{
        height: 450px;
        width: 100px;
    }
    .product__bottom{
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    .product__bottom .btn__white{
        width: 100%;
    }
}
@media screen and (max-width: 900px){
    .banner{
        padding-top: 80px;
        height: calc(100vh - 100px)   ;
    }
    .banner__title {
        font-size: 32px;
    }
    .banner__text{
        font-size: 18px;
        margin-bottom: 30px;
    }
    .banner__content{
        flex-direction: column;
    }
    .banner__right{
        position: relative;
        right: auto;
        bottom: auto;
        max-width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .banner__right img{
        width: 100%;
        height: 300px;
    }
    .banner__left{
        display: flex;
        flex-direction: column;
        align-items: center;
        max-width: 100%;
        padding-bottom: 30px;
    }
    .btn__white{
        height: 60px;
    }
    .btn__outline{
        height: 60px;
    }
    .btn{
        font-size: 16px;
    }
    .status__list{
        flex-wrap: wrap;
    }
    .status__item{
        width: 100%;
        padding: 40px 20px;
    }
    section, .status, .about{
        padding-top: 80px;
    }
    .about__content{
        flex-direction: column;
        gap: 30px;
    }
    .about__right .btn__white{
        margin-top: 30px;
    }
    .about__left{
        max-width: 100%;
        display: flex;
        justify-content: center;
    }
    .about__left img{
        max-width: 500px;
        width: 100%;
    }
    .about__right{
        max-width: 100%;
        padding-top: 0;
    }
    .tradition__list{
        flex-wrap: wrap;
        gap: 150px 20px;
        justify-content: center;
    }

    .tradition__item img {
        bottom: unset;
        margin-top: 40px;
        position: relative;
        width: 100%;
        height: auto;
        max-height: 300px;

    }
    .commander__content{
        flex-direction: column;
    }
    .commander__left{
        width: 100%;
        position: relative;
    }
    .commander__right{
        width: 100%;
        padding-left: 40px;
    }
    .commander__left img {
        position: relative;
        left: -40px;
    }
    .directions{
        padding-top: 80px;
    }
    .direction__item{
        width: calc(100%/2 - 10px);
    }
    .socials__content{
        flex-direction: column-reverse;
    }
    .socials__right{
        position: relative;
        bottom: unset;
        display: flex;
        justify-content: center;
        width: 100%;
        max-width: 100%;
    }
    .socials__content{
        background: transparent;
        padding: 0;
    }
    .socials__left {
        background: #1C1F26;
        border-radius: 8px;
        padding: 70px 54px 70px 70px;
        max-width: 100%;
    }
    .news__list{
        flex-wrap: wrap;
    }
    .new__item{
        width: 100%;
        overflow: hidden;
        border-radius: 8px;
    }
    .contact__content{
        flex-direction: column;
        gap: 0;
    }
    .contact__left{
        width: 100%;
    }
    .contact__left img {
        position: relative;
        bottom: 40px;
    }
    .contact__right{
        max-width: 100%;
        padding-top: 10px;
    }
    .contact__right .btn__white{
        margin-bottom: 30px;
        margin-top: 40px;
    }
    .footer__top{
        flex-direction: column;
        align-items: center;
        gap: 30px;
    }
    .footer__menu{
        justify-content: center;
    }
    .footer__right{
        width: 100%;
        justify-content: center;
        align-items: center;
        display: flex;
        flex-direction: column;
    }
    .footer__bottom{
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }
    .commander{
        padding-top: 80px;
    }
    .become--rec .become__item{
        width: calc(100%/2 - 10px);
    }
    .get__content{
        flex-direction: column;
    }
    .get__left{
        max-width: 100%;
    }
    .get__right{
        max-width: 100%;
    }
    .banner__left{
        padding-top: 0;
    }
    .service__title{
        font-size: 24px;
    }
    .main-direction__item {
        max-width: 500px;
        padding: 30px 20px;
        height: 350px;
    }
    .main-direction__item:nth-child(2), .main-direction__item:nth-child(3), .main-direction__item:nth-child(6){
        max-width: calc(100% - 520px);
    }
    .service__item, .service__item:nth-child(2), .service__item:nth-child(3), .service__item:nth-child(4){
        width: calc(100%/2);
        background-size: cover;
        height: 500px;
    }
    .service__list{
        flex-wrap: wrap;
    }
    .training__list{
        flex-direction: column;
        gap: 30px;
    }
    .training__item{
        width: 100%;
    }
    .training__item:nth-child(2) {
        margin-top: 0;
    }
    .training__item:nth-child(3) {
        margin-top: 0;
    }
    .video, .interview {
        padding-bottom: 50px;
    }
    .video__content h3{
        font-size: 24px;
    }
    .photo__content h3{
        font-size: 24px;
    }
    .top-news__left img {
        max-width: 400px;
    }
    .top-news__left {
        max-width: 350px;
    }
    .top-news__right {
        max-width: calc(100% - 350px);
        padding-top: 30px;
        padding-bottom: 0;
    }
    .article__left{
        padding: 20px;
    }
    .article {
        padding-top: 70px;
    }
    .product__left {
        max-width: 450px;
    }
    .product__right {
        max-width: calc(100% - 470px);
    }
    .product__content {
        gap: 20px;
    }
    .tab button{
        font-size: 20px;
    }
    .product__size--list{
        flex-wrap: wrap;
    }
    .product__color--list{
        flex-wrap: wrap;
    }
    .product__color--item{
        width: 50px;

    }
    .product__img {
        height: 280px;
    }
    .product__info h3{
        font-size: 24px;
        margin-bottom: 10px;
    }
    .product__bottom .price{
        font-size: 30px;
    }
    .product__bottom .price .old{
        font-size: 16px;
    }
    .product__bottom .price{
        gap: 0;
    }
}
@media screen and (max-width: 768px){
.banner__right{
    align-items: flex-end;
}
    .banner__right img{
        height: 250px;

    }
    .section__actions .btn__white{
        font-size: 18px;
    }
    .merch__content h3{
        font-size: 32px;
    }
    .merch__content p{
        font-size: 24px;
    }
    .section__actions{
        flex-direction: column;
        justify-content: center;
    }
    .section__actions .btn__white:last-child {
        width: 247px;
    }
    .tradition__item{
        background-size: cover;
    }
    .news__list {
        padding-bottom: 40px;
    }
    .tradition--rec .tradition__item{
        height: 400px;
    }
    .tradition--rec .tradition__item .tradition__title{
        font-size: 20px;
    }
    .tradition--rec .tradition__item li{
        margin-bottom: 5px;
        font-size: 14px;
    }
    .tradition__points{
        min-height: 100px;
    }
    .get__left img{
        width: 100%;
    }
    .tradition--rec .tradition__item img{
        height: 300px;
    }
    .get__item{
        padding: 20px 30px;
    }
    .main-direction__item{
        max-width: 400px;
    }
    .main-direction__item:nth-child(2), .main-direction__item:nth-child(3), .main-direction__item:nth-child(6) {
        max-width: calc(100% - 420px);
    }
    .main-direction__item--content h3{
        font-size: 24px;
    }
    .main-direction__item--content p{
        padding-right: 30px;
    }
    .read-more{
        font-size: 16px;
    }
    .video__content{
        flex-direction: column;
        gap: 120px;
    }
    .video, .interview {
        padding-bottom: 100px;
    }
    .top-news__content{
        flex-direction: column;
        padding: 20px;
    }
    .top-news__left img{
        position: relative;
        max-width: 100%;
        left: 0;
    }
    .top-news__left{
        max-width: 100%;
    }
    .top-news__right{
        max-width: 100%;
        padding-top: 0;
    }
    .news--page .news__item {
        width: calc(100% / 2 - 10px);
    }
    .top-news__content{
        margin-left: 0;
    }
    .article__content{
        flex-direction: column;
    }
    .article__left{
        max-width: 100%;
    }
    .article__right{
        max-width: 100%;
        align-items: center;
        height: auto;
    }
    .article__right img{
        margin-top: 30px;
    }
    .aside__socials{
        padding-left: 0;
    }
    .article__right h3{
        text-align: center;
    }
    .product__content{
        flex-direction: column;
    }
    .product__left{
        max-width: 100%;
    }
    .product__right{
        max-width: 100%;
    }
    .tab button {
        font-size: 18px;
    }
    .tab{
        padding-left: 0;
    }
    .product__item{
        width: calc(100%/2 - 10px);
    }
    .product__list{
        flex-wrap: wrap;
    }
    .product__item img{
        width: 100%;
    }
    .merch .banner{
        padding-top: 0;
    }
    .merch .banner__content{
        flex-direction: column-reverse;
    }
    .merch .banner__right{
        max-width: 100%;
    }
    .merch .banner__right img{
        height: 300px;
        object-fit: contain;
    }
    .merch .banner, .merch .banner__content{
        height: auto;
    }
    .merch .banner__content{
        gap: 20px;
    }
    .merch .banner__title{
        text-align: center;
    }
    .merch .banner__text{
        text-align: center;
    }
}
@media screen and (max-width: 700px){
    .main-direction__item {
        max-width: 100%;
    }
    .main-direction__item:nth-child(2), .main-direction__item:nth-child(3), .main-direction__item:nth-child(6) {
        max-width: 100%;
    }
    .main-direction__item:nth-child(3):before, .main-direction__item:nth-child(2):before, .main-direction__item:nth-child(6):before {
        background-size: 40%;
    }
    .main-direction__item:first-child:before, .main-direction__item:nth-child(4):before, .main-direction__item:nth-child(5):before {
        background-size: 40%;
    }

    .product__gallery{
        flex-direction: column-reverse;
        align-items: center;
    }
    .product__gallery--left{
        flex-direction: row;
        width: 100%;
        max-width: 100%;
        justify-content: center;
        height: auto;
    }
}
@media screen and (max-width: 600px){
    .banner__actions{
        flex-direction: column;
    }
   .banner__content{
       flex-direction: column-reverse;
       gap: 68px;
   }
    .banner{
        padding-top: 50px;
        background: #15171B;
        height: auto;
    }
    .banner__left{
        padding-left: 40px;
        padding-right: 40px;
    }
    .banner__right{
        background: url('../images/banner.png') no-repeat;
        background-size: cover;
        background-position: center center;
        height: 436px;
    }
    .banner__right img {
        height: 436px;
        object-fit: cover;

    }
   .banner .container{
       padding: 0;
   }
    .banner__title{
        text-align: center;
    }
    .banner__text{
        text-align: center;
    }
    .tradition__item{
        width: 100%;
        background-size: 100% 100%;
    }
    .direction__item{
        height: 350px;
    }
    .directions .section__text{
        font-size: 18px;
    }
    .direction__title{
        font-size: 20px;
    }
    .become__list{
        flex-wrap: wrap;
    }
    .become__item{
        width: calc(100%/2 - 10px);
    }
    .socials{
        padding-top: 80px;
    }
    .socials__right img{
        width: 300px;
    }
    .socials__left{
        padding: 40px 20px;
    }
    .news__img{
        height: 250px;
    }
    .news__bottom{
        flex-direction: column;
    }
    .new__item{
        width: 100%;
    }
    .news__img img{
        width: 100%;
    }
    .merch__top{
        flex-direction: column;
        gap: 20px;
    }
    .merch__link{
        font-size: 16px;
    }
    .commander__content{
        padding-left: 20px;
        padding-top: 20px;
    }
    .commander__left{
        left: auto;
    }
    .commander__left img {
        left:0;
    }
    .commander__right{
        padding-left: 0;
    }
    .gallery__list{
        gap: 10px;
    }
    .gallery__item img{
        height: 200px;
        object-fit: cover;
        width: 100%;
    }
    .gallery__list:first-child{
        margin-bottom: 10px;
    }
    .footer__menu {
        height: 100px;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        gap: 5px 50px;
    }
    .header__socials--link{
        width: 40px;
        height: 40px;
    }
    .header__socials--link svg{
        width: 20px;
    }
    .footer__link{
        font-size: 18px;
    }
    .footer__top{
        gap: 15px;
    }
    .footer__bottom a{
        font-size: 14px;
    }
    .footer__bottom{
        gap: 5px;
    }
    .banner__text{
        margin-bottom: 35px;
    }
    .banner__actions{
        gap: 20px;
    }
    .banner{
        padding-bottom: 40px;
    }
    .banner__content{
        padding-left: 5px;
        padding-right: 5px;
    }
    .header__socials{
        gap: 10px;
        margin-left: 10px;
    }
    .tradition .section__title{
        max-width: 300px;
    }
    .tradition__list{
        padding-bottom: 140px;
    }
    .become--rec .become__item{
        width: 100%;
        padding: 20px;
    }
    .become--rec .become__title{
        font-size: 22px;
    }
    .get__item h3{
        font-size: 20px;
    }
    .faq__item{
        padding: 20px 30px;
    }
    .faq__item summary:after{
        top: 25px;
        right: 20px;
        width: 20px;
        height: 20px;
        background-size: 100%;
    }
    .faq__item[open] summary:after{
        right: 20px;
        top: 25px;
        width: 20px;
        height: 20px;
        background-size: 100%;
    }
    .faq__item summary{
        padding-right: 50px;
    }
    .video, .interview {
        padding-bottom: 70px;
    }
    .photo__item {
        width: calc(100% / 2 - 5px);
    }
    .photo__item img{
        height: 100%;
        object-fit: cover;
        border-radius: 8px;
    }
    .tab button {
        font-size: 14px;
        padding-left: 10px;
        padding-right: 10px;
    }
    .tabcontent{
        padding: 20px;
    }
    .product {
        padding-top: 70px;
    }
    .merch .banner__right{
        height: auto;
    }

}
@media screen and (max-width: 500px){
    .tab{
        flex-direction: column;
        display: flex;
        align-items: flex-start;
    }
    .tab button{
        width: 100%;
    }
    .tab button.active{
        background: #d9d9d9;
        color: #0E0F11;
    }
}
@media screen and (max-width: 480px) {
    .section__title {
        font-size: 28px;
    }

    .commander__content {
        width: 100%;
    }

    .tradition .section__title{
        max-width: 250px;
    }

    .commander__content {
        padding-right: 20px;
    }

    .direction__item {
        width: 100%;
    }

    .become__title {
        font-size: 14px;
    }

    .become__item {
        width: 100%;
    }

    .section__actions .btn__white:first-child, .section__actions .btn__white:last-child {
        width: 100%;
        height: 60px;
    }
    .merch__list{
        flex-direction: column;
    }

    .contact__right .btn__white, .about__right .btn__white, .banner .btn__white, .btn__outline{
        width: 100%;
    }
    .banner__actions{
        width: 100%;
    }

    .footer__menu .menu__link{
        width: 100%;
        min-width: unset;
        font-size: 14px;

    }
    .menu.active{
        gap: 20px;
    }
    .footer__menu .menu__item:nth-child(2), .footer__menu .menu__item:nth-child(6) {
        min-width: unset;
    }
    .contact__info{
        flex-direction: column;
        gap: 20px;
    }
    .container{
        padding-left: 20px;
        padding-right: 20px;
    }
    .tradition__list{
        padding-bottom: 150px;
    }
    .service__title {
        font-size: 20px;
    }
    .service__text{
        font-size: 14px;
    }
    .service__item, .service__item:nth-child(2), .service__item:nth-child(3), .service__item:nth-child(4){
        padding: 20px;
    }
    .training__item h3{
        font-size: 20px;
        padding-left: 10px;
    }
    .training__item p{
        padding-left: 10px;
    }
    .video__right,  .video__left{
        padding: 20px;
    }
    .video__item{
        left: 20px;
    }
    .video__content{
        gap: 60px;
    }
    .video, .interview {
        padding-bottom: 0;
    }
    .photo__content{
        padding-top: 30px;
    }
    .photo__content h3{
        padding-left: 20px;
    }

    .photo__list{
        left: 20px;
    }
    .photo__content {
        width: calc(100% - 20px);
    }
    .photo__bottom{
        padding-left: 20px;
        padding-right: 20px;
    }
    .news--page .news__item {
        width: 100%;
    }
    .news--page .news__list{
        margin-bottom: 0;
    }
    .top-news__right .btn__white{
        width: 100%;
    }
    .tradition__item img{
        height: 300px;
    }
    .product__gallery--item {
        height: 50px;
    }
    .product__right .btn__white{
        width: 100%;
    }
    .product__title{
        font-size: 28px ;
    }
    .product__item{
        width: 100%;
    }
}
