@layer component.base {
  .abut {
    @media (max-width: 499px) {
      display: flex;
      flex-direction: column;
      gap: 1rem;
    }
    @media (min-width: 500px) {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(499px, 1fr));
      grid-gap: 1rem;
    }
    margin-block: var(--form-gap, 1rem);

    &:first-of-type {
      margin-top: 0;
    }
  }
  @media (min-width: 500px) {
    .abut--flex {
      display: flex;
      flex-wrap: wrap;
      gap: var(--form-gap, 1rem);
      align-items: flex-end;

      > .abut__item {
        flex: 0 1 auto;
      }
    }
  }
  .abut__item {
    --form-gap: 0;
  }
}