/*
This file describes styles that are 768px width and smaller
 */
@media all and (max-width: 768px) {
    :root {
        --section-distance: 45px
    }
    h1 {
        font-size: 3rem
    }
    h2 {
        font-size: 1.8rem
    }
    h3 {
        font-size: 1.6rem
    }
    body{
        font-size: 1.4rem
    }
    .header {
        padding: var(--size-1) 0
    }
    .btn, input[type="button"]{
        font-size: 1.4rem;
        height: 34px
    }
    img.logo {
        height: 28px
    }
    section.team .content h2 {
        padding: 3px 6px;
        top: var(--size-1);
        left: var(--size-1)
    }
    .main-block h1{
        margin-top: 3px;
        max-width: 100%
    }
    .main-block .btn {
        margin-top: 12px
    }
    .advantages__item .text{
        width: 130px
    }
    .advantages__item .img-container{
        width: 60px;
        height: 60px
    }
    .advantages__line{
        left: 30px
    }
    .advantages__item:nth-child(even) .text{
        left: -142px
    }
    .advantages__item:nth-child(odd) .text{
        left: 72px
    }
    .advantages__item .text p{
        line-height: 1.2;
        margin-top: 3px
    }
    .main-block .content .media__text div:first-child{
        font-size: 1.2rem;
        padding: 6px 12px;
        width: fit-content
    }
    .main-block .content .media__text div:nth-child(2){
        font-size: 1.6rem;
        margin-top: 6px;
        max-width: 100px;
        text-align: right
    }
    .main-block .content .media__text{
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        top: 42px
    }
    .main-block .media img{
        transform: translateX(-55px);
        width: 108%
    }
    .success-stories h2{
        margin-bottom: var(--size-2)
    }
    .success-stories__item .img-container, .success-stories__item img, .success-stories__item .img-container:after{
        width: 220px;
        height: 300px
    }
    .success-stories__item{
        width: 220px
    }
    .success-stories__items{
        flex-direction: column;
        align-items: center;
        padding-right: 20px;
        row-gap: var(--size-2)
    }
    .success-stories__item h3{
        height: auto
    }
    section + blockquote span {
        font-size: 1.6rem;
        text-align: center;
        line-height: 1.2;
        padding: 0 var(--size-1)
    }
    section + blockquote img{
        width: 26px
    }
    .slider-nav .prev, .slider-nav .next{
        width: 25px;
        height: 25px;
        top: calc(50% - 15px);
        background-size: 7px
    }
    .slider-nav .prev {
        left: var(--size-1)
    }
    .slider-nav .next {
        right: var(--size-1)
    }
    .contact .content {
        padding: 0
    }
    .contact .content p {
        margin-top: 4px
    }
    .contact .content .btn {
        margin-top: 12px
    }
    .main-block .content .media{
        overflow: hidden
    }
  
}
@media all and (max-width: 600px){
   .success-stories__item .img-container, .success-stories__item img, .success-stories__item .img-container:after {
        width: 240px;
        height: 300px
    }
    .success-stories__item, .success-stories__item h3{
        width: 240px
    }
    .success-stories__item .img-container:after{
        top: -7px;
        right: -12px
    }
    .success-stories__items{
        padding-right: 12px
    }
    .success-stories h2{
        max-width: 70%;
        margin-left: auto;
        margin-right: auto
    }
    
   
}
@media all and (max-width: 480px){
   
   
}
@media all and (max-width: 400px){
    body {
        font-size: 1.4rem
    }
    section p:not(:first-child) {
        margin-top: var(--size-1)
    }
    
    section.team .content h2 {
        font-size: 1.8rem
    }
    h3 {
        font-size: 1.4rem
    }
    .main-block .text >img{
        height: 32px
    }

}
@media all and (max-width: 360px){
   section.team .content h2 {
        font-size: 1.2rem
    }
}