.tabs {
  margin-top: 70px;
}

.tabs__list {
  display: flex;
  gap: 38px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--color-secondary);
}

.tabs__trigger {
  color: var(--color-muted);
  font-size: 40px;
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 0.9;
  transition: color 200ms ease;
}

.tabs__trigger[aria-selected="true"] {
  color: var(--color-ink);
}

.js [data-tab-panel][data-state="active"] {
  animation: tabs-panel-enter 200ms linear both;
}

.js [data-tab-panel][data-state="inactive"] {
  display: none;
}

.js .no-js-heading {
  display: none;
}

.no-js-heading {
  margin: 50px 0 20px;
  font-size: 28px;
}

@keyframes tabs-panel-enter {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (max-width: 767px) {
  .tabs {
    margin-top: 50px;
  }

  .tabs__list {
    gap: 20px;
    padding-bottom: 14px;
  }

  .tabs__trigger {
    font-size: 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tabs__trigger {
    transition-duration: 0.01ms;
  }

  .js [data-tab-panel][data-state="active"] {
    animation-duration: 0.01ms;
  }
}