//
// @file
// Paragraphs formatter CSS.
//

@import "variables";
@import "summary";

.paragraph-formatter {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto;
  grid-gap: $gutter-top $gutter-top;
  align-items: center;

  .paragraph-info {
    grid-column: 1 / 2;
    -ms-grid-column: 2;
    -ms-grid-row-span: 1;
    -ms-grid-row: 1;
    grid-row: 1 / span 1;
  }
  .paragraph-summary {
    grid-column: 1 / 2;
    -ms-grid-column: 3;
    -ms-grid-column-span: 1;
    -ms-grid-row-span: 1;
    -ms-grid-row: 1;
    grid-row: 2 / span 1;
    @media (min-width: map-get($grid-breakpoints, 'sm')) {
      grid-column: 2 / 2;
      -ms-grid-column: 3;
      -ms-grid-column-span: 1;
      -ms-grid-row-span: 1;
      -ms-grid-row: 1;
      grid-row: 1 / span 1;
    }
  }
}