/*
This file describes styles that are 768px width and smaller
 */
@media all and (max-width: 768px) {
    .container{
        padding: 0 var(--size-1)
    }
    .footer .logo img {
            width: 220px;
        }
   .grid-1-2 {
        grid-template-columns: 1fr
    }
    .team-item >img {
        width: 180px;
        height: 180px
    }
    .btn, input[type="submit"] {
        padding: 0 12px
    }
    .main-block .content .img-container{
        height: 180px
    }
    .program-item {
        height: auto;
        padding: 38px 0
    }
    .program-item__content p:not(:first-child) {
        margin-top: var(--size-1)
    }
    .program-item__content {
        height: auto
    }
    .educational-item h3 {
        width: calc(100% - 24px);
        left: 12px
    }
    .educational-item {
        height: auto
    }
    .gallery-item {
        height: 180px
    }
    .footer .container{
        display: flex;
        flex-direction: column;
        height: auto
    }
    .footer .logo{
        width: 100%;
        border-radius: var(--border-radius-2) var(--border-radius-2) 0 0;
        text-align: center;
        text-align: left
    }
    .footer .map{
        height: 180px;
        margin-top: 0;
        position: static;
        width: 100%;
        background-color: var(--beige);
        padding: 0 var(--size-1);
        border-radius: 0
    }
    .footer .map iframe{
        border-radius: var(--size-1);
        overflow: hidden
    }
    .footer address{
        width: 100%;
        position: static;
        border-radius: 0 0 var(--border-radius-2) var(--border-radius-2);
        align-items: flex-start;
        padding: var(--size-1)
    }
    .footer .logo:before, .footer .logo:after{
        display: none
    }
    .footer{
        padding-bottom: var(--size-1)
    }
    .footer .logo img{
        width: 200px
    }
    .footer .social{
        padding: 0;
        gap: 24px
    }
    .footer .location{
        width: fit-content;
        text-align: left;
        padding-bottom: 0
    }
    .header .logo {
        height: 20px
    }
    .menu-btn-open img {
        width: 36px;
        height: 16px
    }
  
    .success-modal .title{
    font-size: 2.4rem
}
.success-modal .title + p {
    font-size: 1.8rem;
    margin-top: 24px
}
.popup__content h3{
    font-size: 2.4rem
}
.consult-form label{
    font-size: 1.4rem
}
input{
    font-size: 1.2rem
}
.popup .btn, .consult-form input[type="submit"]{
    font-size: 1.4rem
}
.popup-tel .popup__content {
    width: calc(100% - 24px)
}
}
@media all and (max-width: 600px){
    
   
   
}
@media all and (max-width: 480px){
   
    
}
@media all and (max-width: 400px){
       h1 {
        font-size: 2.8rem
    }
   


}
@media all and (max-width: 360px){
   
}