@import "@/styles/variables.scss";
@import "@/styles/mixins.scss";

.wrapper {
  .h1 {
    //max-width: 54rem;
    margin: 4rem auto 0;
    @include h2();
    @media screen and (max-width: $mobile) {
      font-size: $font-h3;
    }
  }
}

.container {
  padding: 2rem 0;
  .customerContainer {
    //max-width: 54rem;
  }
  .row {
    color: $font-color-6;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid $lineColor;
    @include flex(space-between, center);
  }
  :global(.container:not(.is-max-desktop):not(.is-max-widescreen)) {
    &.customContainer {
      //max-width: 54rem;
    }
  }
}

.cardsColumns {
  > div {
    margin-bottom: 2rem;
    &:last-child {
      margin-bottom: 0;
    }
  }
}

.catalogue {
  position: sticky;
  top: 1rem;
  max-height: calc(100vh - 2rem);
  overflow: auto;
  @media screen and (max-width: $mobile) {
    display: none;
  }
}

.tag {
  display: flex;
  flex-wrap: wrap;
  &_item {
    background-color: $grey-light;
    padding: .5rem 1rem;
    margin-right: .5rem;
    margin-bottom: .5rem;
  }
}