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

@use "sass:map";
@use "variables" as *;
@use "summary";

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

  .paragraph-info {
    grid-row: 1 / span 1;
    grid-column: 1 / 2;
  }

  .paragraph-summary {
    grid-row: 2 / span 1;
    grid-column: 1 / 2;

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