burodesformes/user/themes/gilles_acezat/scss/theme/mobile.scss

@media screen and (max-width: 1024px) {
  .card{
    width: calc((100% / 2) - 10px);
  }
  .works-mea{
    .card{
      &:nth-child(3){
        display: none;
      }
    }
  }

  #items{
    .header-item{
      .info{
        width: calc(100% / 2);
      }
    }
  }
  .img-card{
    width: calc((100% / 2) - 5px);
  }
}

@media screen and (orientation:landscape) and (max-width: 812px) {
.blog{
  header{
    .head{
      nav{
        margin-top: 50vh;
        transform: translate(0, -100%);
      }
    }
  }
  .down{
    header{
      .head{
        nav{
          margin-top: 0!important;
          transform: translate(0)!important;
          transition: all 0.5s 1s ease;
        }
      }
    }
  }
    .works-mea{
      display: none!important;
    }
  }
}

@media screen and (max-width: 414px) {
  .down header, .item header{
    height: 70px;
  }
  header{
    .head{
      padding-top: 10px;
      nav{
        width: 80%!important;
        min-width: 80%!important;
      }
    }
    .contact{
      width: 70px;
      height: 70px;
      h3{
        top: 24px;
        right: 27px;
      }
      &.open{
        .txt{
          right: 25px;
          width: calc(100% - 30px);
          height: calc(100% - 50px);
          overflow-y: auto;
          p{
            font-size: 1rem;
            line-height: 1.4rem;
            &:nth-last-of-type(2){
              font-size: 0.8rem;
              line-height: 1.2rem;
              a{
                width: 15px;
                margin-left: 5px;
              }
            }
            em{
              font-size: 0.5rem;
            }
          }
        }
      }
      &.close{
        width: 70px;
        height: 70px;
      }
    }
    .works-mea{
      .card{
        width: 100%;
        &:nth-child(2){
          display: none;
        }
        &:nth-child(3){
          display: none;
        }
      }
    }
  }

  .blog{
    h2{
      line-height: 9vw;
      font-size: 6vw;
    }
  }
  .down, .item{
    #start{
      margin-top: 70px;
    }
  }
  .card{
    width: calc(100% - 10px);
  }

  #items{
    .header-item{
      -webkit-box-orient: vertical;
      -webkit-box-direction: reverse;
          -ms-flex-direction: column-reverse;
              flex-direction: column-reverse;
      & > div{
        width: 100%!important;
      }
      & > .info{
        margin-top: 25px;
        .title{
        display: block;
          & > a {
            margin-right: 0;
          }
        }
      }
      .prev-next{
        .btn-info{
          display: none;
        }
      }
    }
  }
  .img-card{
    width: calc(100%);
  }
  .item{
    #items{
      padding-top: 25px;
    }
  }
}