gilles-acezat/user/themes/gilles_acezat/scss/theme/item.scss

body{
  #page-wrapper.item{
    margin: 0 10px;
  .contact{
    .txt{display: none}
  }
    #start{
      margin-top: 112px;
    }
    #body-wrapper.blog-listing{
      .img-card{
        width: calc((100% / 3) - 6.5px);
        margin-bottom: 10px;
      }
      .header-item{
        position: relative;
        margin-bottom: 20px;
        padding-top: 20px;
        .title{
          display: inline-flex;
          align-items: baseline;
          h2{
            margin-right: 5px;
            text-transform: uppercase;
          }
          time{
            margin-right: 5px;
          }
          span{
            margin-right: 5px;
          }
        }
        .content{
          width: calc((100% / 3) - 15px);
          margin-top: 20px;
        }
        .prev-next{
          width: calc(100% / 3);
          height: 100%;
          position: absolute;
          top: calc( 50% + 10px );
          transform: translateY(-50%);
          right: 0px;
          .btn{
              display: block;
              width: auto;
              height: 100%;
          .btn-info{
            position: absolute;
            transform: rotate(-15deg);
            margin-left: 40px;
            margin-top: 20px;
          }
          img{
            float: right;
            width: 80%;
          }
        }
        }
      }
    }
    .top{
      text-align: center;
      margin: 20px auto 20px auto;
      width: 50px;
      img{
        width: 20px;
        margin-bottom:5px;
      }
      p{
        transform: rotate(-10deg);
      }
    }
  }
}

@media screen and (max-width: 960px) {
  body{
    #page-wrapper.item{
      #body-wrapper.blog-listing{
        .header-item{
          .content{
            width: calc((100% / 2) - 5px);
          }
          .prev-next{
            width: calc((100% / 2) - 5px);
          }
        }
        .img-card{
          width: calc((100% / 2) - 5px);
        }
      }
    }
  }
}

@media screen and (max-width: 600px) {
  body{
    #page-wrapper.item{
      #body-wrapper.blog-listing{
        .header-item{
          .content{
            width: calc((100%) - 15px);
          }
          .prev-next{
            width: calc((100%) - 15px);
            position: relative;
            transform: translateY(0%);
            .btn{
              .btn-info{
                  display: none;
              }
              img{
                float: none;
                width: 100%;
              }
            }
          }
        }
        .img-card{
          width: 100%;
        }
      }
    }
  }
}