html {
  scroll-behavior: smooth; }

@font-face {
  font-family: 'assistant';
  src: url("../../fonts/assistant/Assistant-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal; }

@font-face {
  font-family: 'assistant';
  src: url("../../fonts/assistant/Assistant-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal; }

@font-face {
  font-family: 'assistant';
  src: url("../../fonts/assistant/Assistant-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal; }

@font-face {
  font-family: 'assistant';
  src: url("../../fonts/assistant/Assistant-ExtraBold.ttf") format("truetype");
  font-weight: 900;
  font-style: normal; }

.brands-lobby {
  font-family: "assistant";
  overflow-x: hidden; }
  .brands-lobby__header {
    width: 1208px;
    margin: auto;
    margin-top: 58px;
    font-family: "assistant"; }
    .brands-lobby__header .header-title {
      margin: auto;
      margin-bottom: 40px;
      text-align: center;
      color: #414141;
      position: relative;
      width: fit-content;
      font-family: "assistant";
      font-weight: 700; }
      .brands-lobby__header .header-title span {
        font-weight: 400; }
      .brands-lobby__header .header-title .title-image {
        position: absolute;
        right: -26px;
        top: -10px;
        height: 40px;
        width: 26px;
        object-fit: contain; }
    .brands-lobby__header .regular-24 {
      color: #414141;
      text-align: center;
      margin-bottom: 40px; }
      .brands-lobby__header .regular-24 * {
        padding: 0;
        margin: 0; }
  .brands-lobby__filters {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
        justify-content: center;
    gap: 32px;
    position: relative;
    margin-bottom: 82px; }
    .brands-lobby__filters .search-field #brand-search-form {
      position: relative; }
      .brands-lobby__filters .search-field #brand-search-form .clear-btn {
        top: 13px; }
        .brands-lobby__filters .search-field #brand-search-form .clear-btn:focus-visible {
          border: 1px solid #990d19; }
      .brands-lobby__filters .search-field #brand-search-form .submit-btn {
        left: -2px; }
        .brands-lobby__filters .search-field #brand-search-form .submit-btn:focus-visible {
          border: 1px solid #515151; }
      .brands-lobby__filters .search-field #brand-search-form .input-search {
        width: 380px; }
    .brands-lobby__filters .category-select {
      width: 380px; }
      .brands-lobby__filters .category-select:focus-visible .label {
        border: 1px solid #D71323; }
      .brands-lobby__filters .category-select .options .option:focus-visible {
        outline: 1px solid #D71323; }
  .brands-lobby__letters {
    width: 1440px;
    margin: auto;
    border-bottom: 1px solid #414141;
    margin-bottom: 72px;
    padding-block-end: 40px;
    display: none; }
    .brands-lobby__letters .letters-list {
      display: -ms-flexbox;
      display: flex;
      -ms-flex-pack: justify;
          justify-content: space-between;
      list-style-type: none;
      padding: 0;
      width: 1220px;
      margin: auto; }
      .brands-lobby__letters .letters-list button {
        background: none;
        border: none;
        cursor: pointer;
        color: #414141;
        font-weight: 400;
        font-size: 30px;
        text-align: center; }
        .brands-lobby__letters .letters-list button.selected-letter {
          color: #D71323;
          font-weight: 700; }
    .brands-lobby__letters .letters-arrow {
      display: none; }
  .brands-lobby__brands-wrapper .brands-grid {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: (1fr)[10];
        grid-template-columns: repeat(10, 1fr);
    width: 1440px;
    column-gap: 50px;
    row-gap: 80px;
    margin: auto;
    position: relative; }
    .brands-lobby__brands-wrapper .brands-grid a.brand-link {
      display: inline-block;
      max-width: 100px;
      aspect-ratio: 1/1;
      border-radius: 50%;
      overflow: hidden;
      box-shadow: 0px 2.27px 13.64px 0px rgba(0, 0, 0, 0.3);
      outline: 3px solid #fff; }
      .brands-lobby__brands-wrapper .brands-grid a.brand-link img {
        width: 100%;
        height: 100%;
        object-fit: contain; }
      .brands-lobby__brands-wrapper .brands-grid a.brand-link:focus-visible {
        border: 1px solid #D71323; }
    .brands-lobby__brands-wrapper .brands-grid .no-brands {
      color: #D71323;
      font-size: 40px;
      padding: 50px 30px;
      text-align: center;
      position: absolute;
      z-index: 1;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%); }
  .brands-lobby__load-more {
    width: 1568px;
    margin: auto;
    margin-top: 78px;
    margin-bottom: 160px;
    text-align: center; }
    .brands-lobby__load-more .btn-primary {
      margin: auto; }
  @media screen and (max-width: 1700px) {
    .brands-lobby__letters {
      width: 1350px; }
    .brands-lobby__brands-wrapper .brands-grid {
      width: 1350px;
      column-gap: 40px;
      row-gap: 65px;
      margin: auto; }
    .brands-lobby__load-more {
      width: 1350px; } }
  @media screen and (max-width: 1350px) {
    .brands-lobby__letters {
      width: 1100px; }
      .brands-lobby__letters .letters-list {
        width: 1050px; }
    .brands-lobby__brands-wrapper .brands-grid {
      width: 1100px;
      column-gap: 25px;
      row-gap: 50px;
      margin: auto; }
    .brands-lobby__load-more {
      width: 1100px; } }
  @media screen and (max-width: 768px) {
    .brands-lobby__header {
      width: 100%;
      margin: auto;
      margin-top: 24px;
      padding-inline: 16px; }
      .brands-lobby__header .header-title {
        margin-bottom: 24px;
        width: 100%;
        font-family: "assistant";
        font-size: 32px;
        line-height: 40px;
        color: #414141;
        text-align: right; }
        .brands-lobby__header .header-title span {
          display: block; }
        .brands-lobby__header .header-title .title-image {
          position: absolute;
          right: 80px;
          top: -10px;
          height: 40px;
          width: 26px;
          object-fit: contain;
          transform: scaleX(-1); }
      .brands-lobby__header .regular-24 {
        text-align: right; }
    .brands-lobby__filters {
      -ms-flex-direction: column;
          flex-direction: column;
      margin-block: 48px;
      gap: 16px;
      position: relative;
      -ms-flex-align: center;
          align-items: center;
      padding-inline: 16px;
      width: 100%; }
      .brands-lobby__filters .search-field {
        width: 100%; }
        .brands-lobby__filters .search-field #brand-search-form {
          position: relative; }
          .brands-lobby__filters .search-field #brand-search-form .input-search {
            width: 100%; }
      .brands-lobby__filters .category-select {
        width: 100%; }
    .brands-lobby__letters {
      width: 100%;
      margin-bottom: 48px;
      padding-block-end: 28px;
      padding-inline: 16px;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-pack: justify;
          justify-content: space-between;
      display: none; }
      .brands-lobby__letters .letters-list {
        width: 100%;
        overflow: scroll; }
        .brands-lobby__letters .letters-list button {
          width: 40px;
          font-size: 24px;
          font-weight: 400; }
      .brands-lobby__letters .letters-arrow {
        display: block; }
    .brands-lobby__brands-wrapper {
      margin-bottom: 48px;
      padding-inline: 16px; }
      .brands-lobby__brands-wrapper .brands-grid {
        -ms-grid-columns: (1fr)[3];
            grid-template-columns: repeat(3, 1fr);
        width: 100%;
        column-gap: 21.5px;
        row-gap: 40px;
        margin: auto; }
        .brands-lobby__brands-wrapper .brands-grid .no-brands {
          width: 100%;
          padding: 0 16px;
          font-size: 22px; }
    .brands-lobby__load-more {
      width: 100%;
      margin: auto;
      margin-top: 0;
      margin-bottom: 80px;
      text-align: center; }
      .brands-lobby__load-more .btn-primary {
        padding: 10px 32px; } }

#brands .row {
  margin-right: 0;
  margin-left: 0; }

#brands .col-12 {
  padding-right: 0;
  padding-left: 0; }