@media (max-width: 1610px) {
    .events::before {
        width: 100%;
    }

    .afisha::before {
        width: 100%;
    }

    .header::before {
        width: 100%;
        border-radius: 0px 0px 0px 0px;
    }

}

@media (max-width: 1380px) {
    .social-section__text .vk {
        gap: 50px;
        margin-left: 32px;
    }
    .social-section__img img{
        max-width: 86%;
    }
}

@media(max-width:1133px) {
    .school__foto {
        width: 110px;
        left: 40%;
    }

    .afisha::before,
    .events::before {
        border-radius: 0;
    }

    .social-section {
        width: 100%;
        border-radius: 0;
    }

    .gallery-section {
        display: none;
    }
}



@media(min-width:1130px) {
    .otdelenie__section.item .otdelenie__section-foto{
        width: 540px;
    }

}

@media(max-width:1040px) {
    .otdelenie__section.item {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }
}


@media (max-width: 930px) {

    .event__date {
        display: none;
    }

    .about {
        flex-direction: column;
        gap: 15px;
        align-items: center;
    }

    .about-section__card-details .full-name {
        font-size: 30px;
    }

    .about-section__card-description .text {
        font-size: 14px;
    }

    .about-section__card-details .speciality {
        margin-top: 3px;
    }

    .about-section__card {
        border-radius: 30px 30px 30px 30px;
    }
    .music .about{
        flex-direction: column-reverse;
    }
    .сhoreography .about{
        flex-direction: column-reverse;
    }
}

@media (max-width: 900px) {
    li.menu__item {
        justify-content: center !important;
        gap: 18px !important;
        flex-wrap: wrap;
    }

    .school__foto {
        display: none;
        gap: 12px;
    }

    .main__banner.about {
        align-items: center;
        gap: 20px;
        flex-direction: column;
    }

    .about-section__card-details .full-name {
        font-size: 24px;
    }

    .about-section__card-description .text {
        font-size: 14px;
    }

    .about__title {
        margin-top: 10px;
        margin-bottom: 15px;
        gap: 20px;
    }

    .about__title p {
        font-size: 14px !important;
        max-width: 100%;

    }

    .header__top {
        justify-content: center;
    }

    .main__banner.items {
        flex-direction: column;
        gap: 10px;
        align-items: center;
    }
 
    .main__banner.items .item-link{
        width: 100%;
    }

    .main__banner.items .item {
        width: 80%;
    }

    .footer__content {
        flex-direction: column;
        gap: 20px;
        align-items: center;
    }

    footer {
        height: unset;
        border-radius: 0;
        width: 100%;
    }

    .social-section__text .vk p {
        font-size: 40px;
    }

    .social-section__text .vk a {
        font-size: 40px;
    }
}

@media (max-width: 800px){
    .header::before{
        height: 188px;
    }
}


@media (max-width: 754px) {
    .event__img {
        display: none;
    }

    .event__description__mob {
        display: block;
        margin-top: 17px;
        width: 100%;
        border-radius: 85px 37px;
    }


    .afisha hr,
    .events hr {
        margin-left: 0;
        margin-right: 0;
        margin-top: 24px;
        margin-bottom: 24px;
    }

    .event {
        margin-top: 10px;
    }

    .event__description {
        max-width: 100%;
    }

    .social-section__text .vk a {
        font-size: 30px;
    }

    .social-section__text .vk p {
        font-size: 32px;
    }

    .social-section__text .vk {
        gap: 23px;
    }
}

@media (max-width: 700px) {
    .header::before {
        height: 171px;
    }

    .elements{
        display:none;
    }

    nav.menu {
        margin-top: 30px;
    }

    .events__top-title {
        font-size: 40px;
    }

    .events__top-all {
        margin-top: 34px;
    }

    .angry-grid {
        width: 370px;
        gap: 9px;
        grid-template-columns: 1fr 1fr;
    }

    .about__button.btn-green {
        width: 100%;
        height: 49px;
        margin-top: 20px;
    }

    .header__tel-button p {
        font-size: 10px;
    }

    .header__tel-button span {
        font-size: 9px;
    }

    .header__tel-button {
        width: 159px;
        height: 48px;
    }

    .header__top-button img {
        height: 48px;
    }

    .header__top-button .tel img {
        height: 12px;
    }

    .header__top-logo {
        height: 48px;
    }

    .about__title h1 {
        line-height: 37px;
    }

    .main__banner {
        margin-top: 0px;
    }

    .about__title p {
        margin-top: 20px;
    }

    .about__button.btn-green p {
        margin-top: 0;
    }
}

@media (max-width: 548px) {
    .otdelenie__section-foto{
        flex-direction: column;
    }
}

@media (max-width: 655px) {

    .angry-grid {
        grid-template-columns: 1fr 1fr;
    }

    .social-section__content {
        padding: 0 20px;
    }

    .about-section__card {
        flex-direction: column;
    }

    a.about-section__card-btn.btn-purple {
        max-width: 100%;
        margin-top: 23px;
    }

    .social-section__text .vk p {
        font-size: 26px;
    }

    .social-section__text .vk a {
        font-size: 24px;
    }

    .social-section__text .vk .ps p {
        font-size: 20px;
    }

    .copyright {
        margin-top: 14px;
        justify-content: center;
    }

    .footer-about {
        padding: 0 20px;
    }
}

@media (max-width: 500px) {

    .recomendations__item-label{
        display: none;
    }


    .events__top {
        margin-bottom: 20px;
    }

    .about-section__title{
        font-size: 21px;
    }

    .about-section__description{
        margin-top: 30px;
    }

    section.about-section {
        margin-top: 0px;
    }

    

    .description-title{
        font-size: 20px;
        margin-top: 5px;
    }
    .detail__img {
        margin-top: 25px;
    }

    .social-section{
        margin-top: 20px;
    }

    .detail__description{
        margin-top: 18px;
    }
    .recomendations__item-name p{
        font-size: 11px;
    }
    .otdelenie{
        margin-top:20px;
    }

    .sign-up {
        margin-top: 50px;
    }

    section.otdel {
        margin-top: 12px;
    }
    
    
    
    nav.menu {
        display: none;
    }

    .header__top-logo img{
        width: 50px;
    }

    .header::before {
        height: 120px;
    }

    .burger-wrap {
        display: block;
    }

    .header__inner {
        padding: 0 20px;
    }
    .about__title h1{
        font-size: 30px;
        line-height: 31px;
    }
}

@media (max-width: 460px) {
    .social-section__text .vk p {
        font-size: 22px;
    }

    .name-school span {
        display: none;
    }

    a.about-section__card-btn.btn-purple {
        font-size: 11px;
    }

    #item-1 .text,
    #item-2 .text,
    #item-3 .text {
        left: 14px;
    }

    .header::before {
        height: 110px;
    }

    .angry-grid .text {
        font-size: 12px;
    }

    .social-section__text .vk a {
        font-size: 18px;
    }

    .social-section__text .vk .ps p {
        font-size: 16px;
    }

    .header__top-logo {
        font-size: 10px;
    }

    .header__top-button img {
        height: 40px;
    }

    .header__tel-button {
        height: 40px;
        width: 148px;
    }

    .angry-grid {
        width: 300px;
        gap: 9px;
    }

}

@media (max-width: 380px) {
    .header::before {
        height: 140px;
    }

    .mobile-menu.open ul{
        padding: 0 82px;
      }


    .header__top {
        flex-direction: column;
        align-items: center;
        margin-top: 0;
    }

    .header__top img {

        font-size: 8px;
    }

    .header__top-button{
        margin-top: 12px;
    }

    .header__top-logo img {
        height: 100%;
    }


    .events__top-title {
        font-size: 32px;
        margin-top: 7px;
    }

    .events__top-all {
        font-size: 10px;
        align-items: center;
    }

    .burger-wrap {
        position: absolute;
        top: 89px;
        left: 22px;
    }

    .mobile-menu {
        top: 78px;
    }
}