.container--tabLayout {
  padding: 0 40px;

  @include mq(xl, min) {
    padding: 0 360px;
  }

  .listContainer {
    border-bottom: 1px solid $color-gray13;
    justify-content: space-around;

    @include mq(lg, max) {
      border-top: 1px solid $color-gray13;
      padding: 8px 0;
    }

    @include mq(lg, max) {
      flex-direction: column;
    }

    .listItem {
      margin: 0;
      padding: 0;

      @include mq(lg, max) {
        margin: 8px 0 8px;
      }

      :global(.vtex-button) {
        background-color: transparent;
        border: none;

        @include mq(lg, max) {
          width: 100%;
        }

        :global(.vtex-button__label) {
          font-weight: 400;
          font-size: 18px;
          line-height: 38px;
          color: $color-gray14;
          text-transform: capitalize;
          border: none;
          padding: 0 !important;

          @include mq(xl, min) {
            font-size: 24px;
          }

          @include mq(lg, max) {
            justify-content: flex-start;
          }
        }
      }
    }

    .listItemActive {
      @include mq(lg, min) {
        border-bottom: 2px solid $color-black2;
      }

      @include mq(xl, min) {
        border-width: 3px;
      }

      :global(.vtex-button) {
        :global(.vtex-button__label) {
          color: $color-black2;
        }
      }
    }
  }

  .contentContainer {
    .contentItem {
      display: grid;
      grid-template-columns: repeat(2, 50%);
      gap: 32px;
      padding: 32px 32px 0;

      @include mq(xl, min) {
        padding: 64px 32px 0;
      }

      @include mq(lg, max) {
        grid-template-columns: 100%;
        padding: 16px 0 0;
        gap: 16px;
      }
    }
  }
}