.tabs {
    display: flex;
    border-bottom: 2px solid var(--color-brown-light);
  }
  
  .tabs button {
    background: none;
    border: none;
    padding:24px;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    color: var(--color-brown-tab);
    display: flex;
  }

  .dark .tabs button {
    color: var(--color-white);
  }
  
  .tabs button[aria-selected="true"] {
    border-bottom: 2px solid var(--color-brand);
    font-weight: 600;
    color: var(--color-dark);
    background: var(--color-brown-lightest);
  }

  .dark .tabs button[aria-selected="true"] {
    border-bottom: 2px solid var(--color-white);
    font-weight: 600;
    color: var(--color-white);
    background: var(--color-grey-dark);
  }
  
  [role="tabpanel"] {
    padding: 32px;
    border-top: none;
    background: var(--color-brown-lightest);
  }

  .dark [role="tabpanel"] {
    background: var(--color-grey-dark);
  }


@media (max-width:768px) {
  .tabs button {
    padding: 15px;
  }
  .tabs button .badge {
    display: none;
  }
}

@media (max-width:480px) {
  .tabs button {
    padding: 5px;
    font-size: 10px;
  }
  .tabs button .badge {
    display: none;
  }
}