header {
  margin-bottom: 200px;

  @media (max-width: 992px) {
    margin-bottom: 32px;
  }

  .filter-wrapper {
    display: none;
    cursor: pointer;

    @media (max-width: 992px) {
      display: block;
    }
  }
}

.showcase {
  margin-bottom: 200px;

  .container {
    display: flex;
    justify-content: space-between;

    @media (max-width: 992px) {
      justify-content: center;
    }

    .menu-wrapper {
      @media (max-width: 992px) {
        position: absolute;
        top: 0;
        left: -120%;
        width: 100%;
        height: 100%;
        transition: all .4s ease;
      }

      @media (min-width: 992px) {
        background-color: transparent !important;
      }

      &.active {
        left: 0;
        background-color: #fff;
        z-index: 2;
        transition: all .4s ease;
      }
    }

    #filterMenu {
      display: flex;
      flex-direction: column;
      gap: 32px;

      @media (max-width: 992px) {
        background-color: #fff;
        padding: 20px;
      }

      .close-btn {
        display: none;
        cursor: pointer;
        align-self: flex-end;

        @media (max-width: 992px) {
          display: block;
        }
      }

      li {
        a {
          font-weight: 400;
          font-size: 14px;
          line-height: 20px;
          cursor: pointer;
          transition: .3s all linear;
        }

        &.active {
          a {
            color: var(--primary-blue);
          }
        }
      }

      li:hover {
        a {
          color: var(--light-blue);
          transition: .3s all linear;
        }
      }
    }

    .products-wrapper {
      display: grid;
      grid-template-columns: repeat(3, 360px);
      gap: 80px 24px;

      @media (max-width: 1500px) {
        grid-template-columns: repeat(2, 360px);
      }

      @media (max-width: 768px) {
        grid-template-columns: repeat(1, 360px);
      }
    }
  }
}