.tabs {
  font-family: Arial, sans-serif;
  
}

.tab-buttons {
  display: flex;
  margin-bottom: 1em;
  gap: .3rem;
  border-bottom: 2px solid hsl(var(--primary-500));
}

.tab-button {
  padding: .5rem 1rem;
  cursor: pointer;
  border: none;
  background: var(--shadow-light-3);
  color: #000;
  transition: background 0.3s, border-bottom 0.3s;
  &.active {
    background: hsl(var(--primary-500));
  }
}
.tab-button:hover {
  background-color: var(--shadow-light-2);
}
.tab-button.active:hover {
  background-color: var(--primary-dark-2);
}

.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
}