@use 'variables' as *;

.form-grid {
  display: grid;
  gap: $space-md;
  grid-template-columns: repeat(12, 1fr);

  @media (max-width: $bp-mobile) {
    grid-template-columns: 1fr;
  }
}

.col-1 { grid-column: span 1; }
.col-2 { grid-column: span 2; }
.col-3 { grid-column: span 3; }
.col-4 { grid-column: span 4; }
.col-6 { grid-column: span 6; }
.col-8 { grid-column: span 8; }
.col-12 { grid-column: span 12; }

@media (max-width: $bp-mobile) {
  [class^='col-'] {
    grid-column: span 1 !important;
  }
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: $space-xs;

  &__label {
    font-size: $font-size-sm;
    font-weight: 600;
    color: $color-text;
    &--required::after {
      content: ' *';
      color: $color-danger;
    }
  }
  &__error {
    font-size: $font-size-xs;
    color: $color-danger;
  }
  &__hint {
    font-size: $font-size-xs;
    color: $color-text-muted;
  }
}