.m-vertical-tabs {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
}

  .m-vertical-tabs__list {
    display: flex;
    flex-direction: column;
    width: 17.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  @media (min-width: 768px) {

  .m-vertical-tabs__list {
      padding: 0.625rem 0;
      border-radius: 0.9375rem
  }
    }

  .m-vertical-tabs__button {
    --outline-offset: -0.625rem;

    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    padding: 1.25rem;
    cursor: pointer;
    text-align: left;
    text-decoration: none;
    color: var(--color-text-primary, #313243);
    border: 0;
    border-left: 0.0625rem solid var(--color-greyscale-5, #d9dce3);
    border-radius: 0;
    background-color: transparent;
    box-shadow: none;
    font: inherit;
    gap: 0.625rem;
    appearance: none;
  }

  .m-vertical-tabs__button::after {
      display: none;
    }

  .m-vertical-tabs__button--active {
      color: var(--color-main-1, #7573ff);
      border-left: 0.125rem solid var(--color-main-1, #7573ff);
      background-color: var(--color-main-5, #ececff);
    }

  .m-vertical-tabs__button:hover:not([disabled]):not(.m-vertical-tabs__button--active) {
      color: var(--color-main-1, #7573ff);
    }

  .m-vertical-tabs__button[disabled] {
      cursor: not-allowed;
      color: var(--color-greyscale-5, #acadb4);
    }

  .m-vertical-tabs__button .a-button__icon {
      flex-shrink: 0;
      width: 1.25rem;
      height: 1.25rem;
      fill: var(--color-greyscale-4, #acadb4);
    }

  .m-vertical-tabs__button .m-vertical-tabs__button-text {
      display: none;
      font-size: 1rem;
      font-weight: 500;
      line-height: 1.375rem;
    }

  @media (min-width: 768px) {

  .m-vertical-tabs__button .m-vertical-tabs__button-text {
        display: block
    }
      }

  .m-vertical-tabs__container {
    flex: 1 1 0;
  }

  .m-vertical-tabs__content {
    display: none;
  }

  .m-vertical-tabs__content--active {
      display: block;
    }

.m-vertical-tabs--mobile {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.m-vertical-tabs--mobile .m-vertical-tabs__button {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 1.25rem;
    cursor: pointer;
    text-align: left;
    color: var(--color-text-primary, #313243);
    border: 0;
    border-left: 0.0625rem solid var(--color-greyscale-5, #d9dce3);
    background-color: transparent;
    font: inherit;
    gap: 0.625rem;
  }

.m-vertical-tabs--mobile .m-vertical-tabs__button--active {
      color: var(--color-main-1, #7573ff);
      border-left: 0.125rem solid var(--color-main-1, #7573ff);
      background-color: var(--color-main-5, #ececff);
    }

.m-vertical-tabs--mobile .m-vertical-tabs__button:hover:not([disabled]):not(.m-vertical-tabs__button--active) {
      color: var(--color-main-1, #7573ff);
    }

.m-vertical-tabs--mobile .a-button__icon {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    fill: var(--color-greyscale-4, #acab4);
  }

.m-vertical-tabs--mobile .m-vertical-tabs__button-text {
    display: block;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.375rem;
  }

.m-vertical-tabs--mobile .m-vertical-tabs__content {
    border-left: 0.125rem solid var(--color-main-1, #7573ff);
  }

.m-vertical-tabs--mobile .m-vertical-tabs__content.m-vertical-tabs__content--active {
      display: block;
    }

.m-vertical-tabs--mobile .m-vertical-tabs__content:not(.m-vertical-tabs__content--active) {
      display: none;
    }

.m-vertical-tabs--mobile .m-vertical-tabs__content .m-vertical-tabs__content-inner {
      padding: 0.9375rem;
      font-size: 0.875rem;
      font-weight: 500;
    }

@media all and (min-width: 769px) {

.m-vertical-tabs--mobile .m-vertical-tabs__content .m-vertical-tabs__content-inner {
        font-size: 0.875rem;
        font-weight: 500
    }
      }