.projects-header {
  padding: 100px 0;
  background-color: var(--color-primary);
  color: var(--color-white);

  h1 {
    margin: 0 0 15px 0;
    font-size: var(--font-size-huge);
  }
}

.projects-header-text {
  margin: 0 0 75px 0;
}

.projects-header-filter {
  margin: 20px 0 0 0;
  background: inherit;
  padding: 0 0 10px 0;
  border: none;
  max-width: 100%;
  width: 100%;
  color: var(--color-white);
  border-bottom: 2px solid var(--color-white);
  outline: none;

  @media (min-width: 768px) {
    width: calc(100% / 12 * 4);
  }

  &:focus {
    border-bottom: 2px solid var(--color-secondary);
  }
}