.learning--page {
  .hero {
    .bg {
      background-image: url('/assets/img/learning/hero.jpg');
    }
  }

  .s1 {
    .post {
      margin-bottom: 80px;

      .txtBox {
        position: relative;
        z-index: 1;
        background: #fff;
        padding: 35px 25px;
        @include boxSizing(border-box);
        @extend %defaultBorderRadius;
        @extend %defaultBoxShadow;
        width: 120%;

        @media (max-width: 992px) {
          width: 100%;
        }

        h2 {
          margin-bottom: 30px;
        }

        p {
          margin-bottom: 25px;
        }

        @media (max-width: 992px) {
          border-top-left-radius: 0;
          border-top-right-radius: 0;
        }

        @media (max-width: 575px) {
          padding: 35px 15px;
        }
      }

      .imgBox {
        display: block;
        position: relative;
        z-index: 0;
        @extend %defaultBorderRadius;
        @extend %defaultBoxShadow;
        overflow: hidden;

        &:hover {
          .imgMask {
            background-color: rgba(#000, 0.4);
          }
        }

        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          display: block;
          min-height: 400px;

          @media (max-width: 1400px) {
            //min-height: 400px;
          }
        }

        i {
          display: block;
          position: absolute;
          top: 50%;
          left: 50%;
          @include transform(translate(-50%, -50%));
          z-index: 1;
          font-size: 55px;
          color: #fff;
        }

        .imgMask {
          width: 100%;
          height: 100%;
          position: absolute;
          top: 0;
          left: 0;
          z-index: 0;
          @extend %defaultTransition;
        }

        @media (max-width: 992px) {
          border-bottom-left-radius: 0;
          border-bottom-right-radius: 0;
        }
      }

      &.reverse {
        direction: ltr;

        .txtBox {
          direction: rtl;
        }
      }
    }
  }

  .s2 {
    direction: ltr;
    text-align: center;
  }
}