.banner {
  position: relative;
  /* display: flex; */

  .project-categories-container {
    position: relative;
    display: flex;
    flex: 1;

    &.desktop {
      display: flex;
      @media (max-width: 1024px) {
        display: none;
      }
    }
    &.mobile {
      display: none;
      @media (max-width: 1024px) {
        display: flex;
      }
    }
    /* Mulitple banners */
    .project-category-banner {
      height: 100vh;
      position: relative;
      display: flex;
      align-items: flex-end;
      padding-bottom: 95px;
      background-repeat: no-repeat;
      background-size: cover;
      background-position: 60% center;
      overflow: hidden;
      width: 146px;
      transition: var(--transition);
      @media (max-width: 1024px) {
        height: 80vh;
      }
      &::after {
        content: "";
        background: linear-gradient(90deg, rgb(0 0 0 / 0%) 0%, rgb(0 0 0 / 50%) 0%);
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
      }
      &.active {
        width: var(--active-slide-width) !important;
        background-position: center !important;
        &::after {
          background: linear-gradient(
            231deg,
            rgba(0, 0, 0, 0) 38.4%,
            rgba(0, 0, 0, 0.8) 100%
          ) !important;
        }
        .max-width {
          z-index: 1;
          animation: fadeIn 1s ease-in-out 0.5s forwards;
        }
        .side-tag {
          display: none;
        }
      }
      .max-width {
        width: 100%;
        opacity: 0;
        @media (max-width: 1024px) {
          opacity: 1;
        }
      }
    }
    .side-tag {
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: space-between;
      transform: scale(-1);
      position: absolute;
      right: 0;
      bottom: 0;
      z-index: 2;
      writing-mode: tb-rl;
      .title {
        font-size: 24px;
        font-weight: 600;
        color: #fff;
        line-height: normal;
        letter-spacing: 1.2px;
        padding-bottom: 31px;
      }
      .arrow {
        padding: 20px;
        svg {
          transform: rotate(180deg);
        }
      }
    }
  }
  /* Single banner */
  .single-banner {
    width: 100%;
    height: 80vh;
    @media (max-width: 768px) {
      height: 55vh;
    }
    &.event-banner,
    &.project-banner {
      height: 40vh;
      .banner-content {
        max-width: 600px !important;
      }
    }
    .project-category-banner {
      width: 100%;
      height: 100%;
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
      &::after {
        content: "";
        background: linear-gradient(23deg, rgba(0, 0, 0, 0.8) 3.87%, rgba(0, 0, 0, 0) 67.88%);
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
      }
      .max-width {
        height: 100%;
        position: relative;
        display: flex;
        align-items: flex-end;
        padding-bottom: 57px;
      }
      .banner-content {
        max-width: 879px;
        .banner-title {
          color: #fff;
          font-size: 34px;
          font-weight: 600;
          line-height: normal;
          @media (max-width: 768px) {
            font-size: 28px;
          }
          @media (max-width: 400px) {
            font-size: 24px;
          }
        }
      }
    }
  }

  .banner-content {
    position: relative;
    max-width: 680px;
    width: 100%;
    color: #fff;
    z-index: 3;

    .banner-title {
      margin-top: 36px;
      margin-bottom: 15px;
      color: #fff;
      @media (max-width: 1024px) {
        margin-top: 15px;
        font-size: 30px;
      }
    }
    .project-category-label {
      text-transform: capitalize;
      padding: 8px 10px;
      text-align: center;
      font-size: 13px;
      color: #fff;
      font-weight: 700;
      line-height: 21px;
      letter-spacing: 2.6px;
    }
  }

  /* Mobile */
  .p-cat-banner {
    width: 500px;
    background-size: cover;
    height: 400px;
    position: relative;
    display: flex !important;
    flex-direction: column;
    justify-content: flex-end;
    gap: 25px;
  }
}