challenge-vtex-io-Filipe-Quintanilha/styles/sass/pages/product/vtex.tab-layout.scss

.container {
  padding: 16px 40px 0;

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

    .listItem {
      padding: 0;
      margin: 0;

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

        :global(.vtex-button__label) {
          font-size: 18px;
          line-height: 38px;
          font-weight: 400;
          color: $color-gray12;
          text-transform: capitalize;
        }
      }
    }

    .listItemActive {
      :global(.vtex-button) {
        background-color: transparent;
        border: none;
        border-bottom: 2px solid $color-black2;

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

  .contentContainer {
    .contentItem {
      display: flex;
      gap: 32px;
      padding: 32px 32px 0;
    }
  }
}

@media screen and (max-width: 1024px) {
  .container {
    padding-top: 0;
    .listContainer {
      flex-direction: column;
      padding: 16px 0;
      border-top: 1px solid $color-gray11;
      gap: 16px;
    }

    .listItem {
      :global(.vtex-button) {
        width: 100%;
        :global(.vtex-button__label) {
          flex-direction: column;
          align-items: flex-start;
          padding: 0;
          padding-top: 0 !important;
          padding-bottom: 0 !important;
        }
      }
    }

    .listItemActive {
      :global(.vtex-button) {
        border-bottom: none !important;
      }
    }
  }

  .contentContainer {
    .contentItem {
      flex-direction: column;
      padding: 16px 0 !important;
      gap: 16px !important;
      border-bottom: 1px solid $color-gray11;
    }
  }
}
@media screen and (min-width: 1920px) {
  .container {
    padding: 16px 360px 0;
  }
}