/*

- Add icon variables here, f.e.

$icon-check: '<svg width="18" height="18" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7 11.2 3.4 7.6 2 9l5 5 9-9-1.4-1.4z" fill="currentColor"/></svg>';


- This variables can be used like this:

.className {
  background-image: background-icon($icon-check, $primary-color-1);
}

*/
.snk-formComponent.snk-section {
  --snk-form-frame-px: 40px;
}
.snk-formComponent.snk-section_single {
  --snk-container-width: 680px;
  --snk-text-align: center;
}
.snk-formComponent.snk-section .row {
  --snk-gutter-y: 3rem;
}
@media (min-width: 1024px) {
  .snk-formComponent.snk-section .row {
    --snk-gutter-x: 6rem !important;
  }
}
.snk-formComponent.snk-section .row .col-12 {
  position: relative;
  z-index: 1;
}
.snk-formComponent.snk-section .row .col-12:last-child {
  z-index: 0;
}
.snk-formComponent .snk-roofline {
  margin-bottom: 1rem;
}
.snk-formComponent h2 {
  margin-bottom: 0;
  text-align: var(--snk-text-align, left);
}
.snk-formComponent h2 + .snk-formComponent-desc {
  margin-top: 1rem;
}
.snk-formComponent-desc {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  text-align: var(--snk-text-align, left);
}
.snk-formComponent-desc:not(:last-child) {
  margin-bottom: 3rem;
}
.snk-formComponent-desc > * {
  margin-bottom: 0;
}
.snk-formComponent-desc svg {
  flex-shrink: 0;
}
.snk-formComponent-modal {
  padding: 0;
}
.snk-formComponent-modal .hs-form-frame {
  margin: calc(var(--snk-form-frame-mobile-px, var(--snk-form-frame-px, 0)) * -1);
  z-index: 0;
}
@media (min-width: 1024px) {
  .snk-formComponent-modal {
    padding: 0;
  }
  .snk-formComponent-modal .hs-form-frame {
    margin: calc(var(--snk-form-frame-px, 0) * -1);
  }
}
.snk-formComponent-modal h3 {
  margin-bottom: 1rem;
  text-align: var(--snk-text-align, left);
  position: relative;
  z-index: 1;
}
.snk-section_mid .snk-formComponent-modal h3 {
  color: var(--snk-neutral-color) !important;
}