@use "@naomi-2025/ui-core/site-config";
@use "@naomi-2025/ui-core/mq";

.site-main {
  position: relative;
  margin-bottom: site-config.spacer(8);

  &__contact {
    margin-top: site-config.spacer(8);
    display: grid;
    column-gap: site-config.$column-gap;
    grid-template-areas:
      "sm-text"
      "sm-form";

    @media (width > mq.$mq-768) {
      grid-template-columns: repeat(12, 1fr);
      grid-template-areas:
        "sm-text sm-text sm-text sm-text sm-form sm-form sm-form sm-form sm-form sm-form sm-form sm-form";
    }
  }

  &__form-text {
    grid-area: sm-text;

    > * + * {
      margin-top: site-config.spacer(0);
    }
  }

  &__form {
    grid-area: sm-form;
  }

  @media (width < site-config.$small-header-mq) {
    margin-top: site-config.spacer(1);
  }
}
