@use "../../utils" as *;

/*----------------------------------------*/
/*  5.1 blog css start
/*----------------------------------------*/
.mtblog {
  &__section {
    @media #{$md} {
      margin-bottom: 120px;
      margin-right: 0;
    }
  }

  &__item {
    &:hover {
      & .mtblog__thumb {
        & img {
          @include transform(scale(1.2));
        }
      }
    }
  }

  &__category {
    position: absolute;
    top: 30px;
    left: 24px;

    & span {
      font-weight: 500;
      background: #111;
      color: #fff;
      padding: 15px 25px;
      border-radius: 30px;
    }
  }

  &__meta {
    & span {
      margin-right: 0px;
    }

    & cite {
      width: 1px;
      height: 12px;
      background: #57595c;
      display: inline-block;
      margin: 0 10px;
    }

    &-date {
      background: var(--mt-common-black-2);
      padding: 16px;

      @media #{$xl} {
        margin-right: 20px;
      }

      &::after {
        content: "";
        position: absolute;
        width: 91px;
        height: 100%;
        background: var(--mt-common-black);
        top: -14px;
        right: -10px;
        @include transform(rotate(16deg));
        z-index: -1;
      }

      & span {
        text-transform: uppercase;
        color: var(--mt-common-white);

        @media #{$xl} {
          font-size: 14px;
        }

        @media #{$lg} {
          font-size: 14px;
        }

        & strong {
          font-size: 31px;
          color: var(--mt-common-white);

          @media #{$xl} {
            font-size: 25px;
          }

          @media #{$lg,$md,$xs} {
            font-size: 20px;
          }
        }
      }
    }
  }

  &__title {
    font-size: 24px;
    line-height: 34px;

    @media #{$md,$xs} {
      & br {
        display: none;
      }
    }

    & a {
      background-repeat: no-repeat;
      background-size: 0% 2px, 0 2px;
      background-position: 100% 100%, 0 100%;
      transition: background-size 0.4s linear;
      background-image: linear-gradient(#0e3631, #0e3631), linear-gradient(#0e3631, #0e3631);
    }

    &:hover {
      & a {
        background-size: 0% 2px, 100% 2px;
      }
    }
  }

  &__thumb {
    overflow: hidden;

    & img {
      transition: .7s;

      @media #{$md,$xs} {
        width: 100%;
        height: auto;
        object-fit: cover;
      }
    }
  }

  &__btn {
    & a {
      font-weight: 700;
      color: var(--mt-common-black);
    }
  }

  &__arrow {
    @media #{$xs} {
      margin-bottom: 90px;
    }
  }

  &__button {
    position: absolute;
    left: 0;
    right: auto;
    top: 50%;
    @include transform(translateY(-0%));

    &-prev {
      left: 70px;

      & span {
        background-color: var(--mt-common-black-2);

        & svg,
        path {
          color: var(--mt-common-white);
        }
      }
    }

    & span {
      width: 60px;
      height: 60px;
      line-height: 60px;
      border: 1px solid var(--mt-text-body);
      border-radius: 100%;
      display: inline-block;
      text-align: center;
    }
  }

  // blog 2
  &__2 {
    & .mtblog {
      &__meta {
        & span {
          & img {
            border-radius: 50px;
            width: 32px;
            height: 32px;
            object-fit: cover;
          }
        }
      }

      &__title {
        font-size: 28px;
      }
    }
  }

  // blog 3
  &__3 {
    & .mt-section-content {
      @media #{$md,$xs} {
        margin-left: 0px;
        margin-right: 0px;
      }
    }
    & .mtblog__thumb img{
      @media #{$md,$xs} {
        width: 200px;
        height: 90px;
        object-fit: cover;
      }
    }
    & .mtblog__content{
      @media #{$md,$xs} {
        padding-left: 0;
        margin-right: 0;
        padding-right: 0;
        margin-left: 0;
      }
    }
    & .mtblog__item {
      border-top: 1px solid var(--mt-border-3);
      border-bottom: 1px solid var(--mt-border-3);
      padding: 32px 0;
      margin-bottom: -1px;
      transition: 0.4s;

      @media #{$md,$xs} {
        flex-wrap: wrap;
        gap: 20px;
      }

      &:hover {
        & .mtblog__date {
          background: var(--mt-theme-1);
        }

        & .mtblog__title {
          color: var(--mt-theme-1);
        }
      }
    }

    & .mtblog__date {
      background: var(--mt-common-white);
      padding: 24px 16px;
      position: absolute;
      border-radius: 5px;
      top: 50%;
      left: 0;
          @include transform(translateY(-50%));

      transition: 0.4s;

      & span {
        font-size: 16px;
        color: var(--mt-common-black);
      }

      & strong {
        color: var(--mt-common-black);
        font-size: 44px;
        font-weight: 700;
        display: block;
        margin-bottom: 5px;
        line-height: 42px;
      }
    }

    & .mtblog__title {
      font-size: 24px;
      color: var(--mt-common-white);
    }

    & .mtblog__btn-wrap {
      flex: 0 0 auto;
    }

    & .mt-btn-wrap {
      & .mt-btn-border {
        border-color: var(--mt-border-3);
        color: var(--mt-common-white);

        &:hover {
          color: var(--mt-common-black);
        }
      }

      & .mt-btn-border-icon {
        &:hover {
          color: var(--mt-common-black);
        }
      }
    }
  }

  // blog 4
  &__4 {
    border: 1px solid var(--mt-border-1);
  }

  // blog 5
  &__5 {
    & .mt-section-content {
      @media #{$lg, $md, $xs} {
        margin-left: 0;
      }
    }

    & .mtblog {
      &__item {
        @media #{$lg, $md, $xs} {
          flex-wrap: wrap;
          gap: 20px;
        }

      }

      &__thumb {
        flex: 0 0 auto;

        @media #{$lg, $md, $xs} {
          width: 100%;
        }

        & img {
          border-radius: 10px 0px 0px 0px;

          @media #{$lg, $md, $xs} {
            width: 100%;
          }
        }
      }
    }

    & .mtblog__date {
      background: var(--mt-common-white);
      padding: 10px 14px;
      position: absolute;
      border-radius: 5px;
      bottom: 0%;
      left: 0;
      transition: 0.4s;

      & strong {
        color: var(--mt-common-black);
        font-size: 34px;
        font-weight: 700;
        display: block;
        margin-bottom: 5px;
        line-height: 42px;
      }

      & span {
        font-size: 16px;
        color: var(--mt-common-black);
      }
    }

    & .mtblog__meta {
      & span {
        color: rgba(255, 255, 255, 0.8);
      }
    }

    & .mtblog__title {
      font-size: 28px;
      color: var(--mt-common-white);
    }

    & .mtblog__btn {
      & a {
        color: var(--mt-common-white);

        & i {
          margin-left: 7px;
              @include transform(rotate(-30deg));
          color: var(--mt-common-white);
        }
      }
    }
  }
}

• [F] _blog.scss
  Delete
• [F] _postbox.scss
  Delete
• [F] _sidebar.scss
  Delete
• [F] index.scss
  Delete