.associationHeader {
  display: grid;
  grid-template-columns: 1fr;
  column-gap: var(--spacing-gap-column);
  row-gap: var(--spacing-gap-row);
  align-items: center;
  max-width: var(--size-width-p);
  margin: 0 auto var(--spacing-section-bottom);

  &.wide {
    max-width: var(--size-width-lead);
  }

  &.hasLogo {
    grid-template-columns: 2fr 1fr;
  }

  h1 {
    font-size: var(--font-size-h1);
    margin-bottom: var(--spacing-m);
  }

  p {
    margin-bottom: var(--spacing-m);
  }
}

@media (max-width: 600px) {
  .associationHeader {
    grid-template-columns: 1fr;

    &.hasLogo {
      grid-template-columns: 1fr;
    }

    img {
      max-width: 16rem;
    }
  }
}