html,
body {
  max-width: 100%;
  overflow-x: clip;
}

.workspace {
  min-width: 0;
  max-width: 100%;
}

.return-family {
  display: block;
  margin-top: 18px;
  color: #f6c89d;
  text-decoration: none;
  font-size: 12px;
  font-weight: 800;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.header-actions .return-family {
  margin: 0;
  padding: 9px 13px;
  border: 1px solid #e4e9ef;
  border-radius: 999px;
  color: #4a6078;
  background: #fff;
}

@supports not (overflow: clip) {
  html,
  body {
    overflow-x: hidden;
  }
}

@media (max-width: 560px) {
  .workspace {
    padding: 14px;
    overflow-x: hidden;
  }

  .workspace > header {
    align-items: flex-start;
    gap: 8px;
  }

  .workspace > header h1 {
    font-size: 21px;
  }

  .header-actions {
    display: grid;
    justify-items: end;
  }

  .header-actions span {
    display: none;
  }

  .header-actions .return-family {
    white-space: nowrap;
    padding: 8px 10px;
  }

  .search {
    padding: 20px 16px;
  }

  .metrics {
    gap: 8px;
  }

  .metrics article {
    min-width: 0;
    padding: 13px 10px;
  }

  .results {
    padding: 14px;
  }

  .card {
    min-width: 0;
    padding: 12px;
    gap: 10px;
  }
}