$layout-gutter: $spacing-md;

.layout {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  margin-top: -$layout-gutter;
  margin-left: -$layout-gutter;

  .layout__section {
    display: block;
    margin-top: $layout-gutter;
    margin-left: $layout-gutter;
    flex: 2 2 30rem;
    min-width: 51%;
    max-width: calc(100% - #{$layout-gutter});

    &.layout__section--secondary {
      flex: 1 1 15rem;
      min-width: 0;
    }

    &.layout__section--one-half {
      flex: 1 1 28rem;
      min-width: 0;
    }

    &.layout__section--one-third {
      flex: 1 1 15rem;
      min-width: 0;
    }

    &.layout__section--annotated {
      min-width: 0;
      flex: 1 1 100%;

      .annotation__wrapper {
        display: flex;
        flex-wrap: wrap;
        margin-top: -$layout-gutter;
        margin-left: -$layout-gutter;

        .annotation {
          min-width: 0;
          max-width: calc(100% -#{$layout-gutter});
          margin-top: $layout-gutter;
          margin-left: $layout-gutter;
          flex: 1 1 15rem;
          padding: $spacing-md $spacing-lg 0;

          @media screen and (min-width: breakpoint('lg')) {
            padding: $spacing-lg $spacing-lg $spacing-lg 0;
          }

          @media screen and(min-width: breakpoint('md')) {
            padding: $spacing-md 0 0;
          }
        }

        .annotation-content {
          min-width: 0;
          max-width: calc(100% - #{$layout-gutter});
          margin-top: $layout-gutter;
          margin-left: $layout-gutter;
          flex: 2 2 30rem;
        }
      }
    }
  }
}