@charset "UTF-8";

//
// Trunks
//
// A two column centered 33/66 template.
//
// .layout-trunks--right - Right sidebar variant.
//
// Markup: ../../../../../templates/layout/grid/two-column/trunks/trunks.twig
//
// Style guide: Layout.Grid.2Column.Trunks
//
$_layout-trunks-columns: (
  $su-breakpoint-xs: 1fr,
  $su-breakpoint-sm: 1fr 1fr 1fr,
  $su-breakpoint-md: 1fr 1fr 1fr,
  $su-breakpoint-lg: 1fr 1fr 1fr,
  $su-breakpoint-xl: 1fr 1fr 1fr,
  $su-breakpoint-2xl: 1fr 1fr 1fr
);

.layout-trunks {
  > section {
    @include centered-column;
    @include responsive-grid-columns($_layout-trunks-columns);

    div {
      &:first-child {
        @include grid-media('sm') {
          @include grid-item-spans(1, span 1);
        }
      }

      &:nth-child(2) {
        @include grid-media('sm') {
          @include grid-item-spans(2, span 2, 1, span 1);
        }
      }
    }

  }
}
