@use '../../mixins/ms';
@use '../../compiled/tokens/scss/size';

.c-comment-form {
  display: grid;
  grid-gap: size.$spacing-gap-comment-form-vertical
    size.$spacing-gap-comment-form-horizontal;
  grid-template-columns: 1fr 1fr;
}

.c-comment-form > * {
  grid-column: span 2;
}

@media (min-width: size.$breakpoint-s) {
  .c-comment-form__name,
  .c-comment-form__email {
    grid-column: span 1;
  }
}

@media (min-width: size.$breakpoint-m) {
  .c-comment-form__reply-actions {
    justify-self: start;
  }
}