#archive {
  h1 {
    padding-block-end: var(--spacing-m);
  }

  h1+p {
    max-inline-size: 60ch;
    padding-block-end: var(--spacing-l);
  }

  form {
    .input-wrapper {
      display: flex;
      flex-wrap: wrap;
      column-gap: var(--spacing-m);
      row-gap: var(--spacing-s);

      .field-group {
        margin-top: 0;
        width: 20rem;
      }
    }

    .btn-primary {
      margin-block-start: var(--spacing-m);
      inline-size: fit-content;
    }
  }
}

@media (max-width: 560px) {
  #archive {
    form {
      .input-wrapper {
        flex-direction: column;
        row-gap: var(--spacing-m);

        .field-group {
          width: 100%;
        }
      }
    }
  }
}