.neop-container {
  margin: 0 auto;
  max-width: 50rem; /* 800px */
}

.neop-container::after {
  content: '';
  display: table;
  clear: both;
}

.neop-container-wide {
  max-width: 80rem; /* 1280px */
}



.neop-center-text {
  text-align: center;
}



/* 2:1 aspect ratio for smallest screen widths */
/* (becomes taller at larger breakpoints) */
[class*='neop-ratio']::before {
  content: '';
  display: block;
  padding-top: 50%;
}



.neop-grid {
  display: -ms-grid;
  display: grid;
}

/* prevent links from effecting each grid item’s width */
.neop-grid > * {
  min-width: 0;
}



/* sidebar grid initially stacked column for small screens */
.neop-sidebar-grid {
  -ms-grid-rows: auto;
      grid-template-rows: auto;
  -ms-grid-columns: 1fr;
      grid-template-columns: 1fr;
  grid-row-gap: 1.5rem;
  grid-column-gap: 1.5rem;
      grid-template-areas:
    'meta'
    'main'
    'aside';
}

.neop-sidebar-grid > header {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  grid-area: meta;
}

.neop-sidebar-grid > section {
  -ms-grid-row: 2;
  -ms-grid-column: 1;
  grid-area: main;
}

.neop-sidebar-grid > aside {
  -ms-grid-row: 3;
  -ms-grid-column: 1;
  grid-area: aside;
}



@media (min-width: 20em) {
  /* 3:1 aspect ratio */
  .neop-ratio-3-1::before {
    padding-top: 33.3333%;
  }

  /* 4:1 aspect ratio */
  .neop-ratio-4-1::before {
    padding-top: 25%;
  }

  /* 5:1 aspect ratio */
  .neop-ratio-5-1::before {
    padding-top: 20%;
  }

  /* 6:1 aspect ratio */
  .neop-ratio-6-1::before {
    padding-top: 16.6666%;
  }
}

@media (min-width: 40em) {
  /* sidebar grid contains 1/3 width sidebar for larger screens */
  .neop-sidebar-grid {
    -ms-grid-columns: (1fr)[3];
        grid-template-columns: repeat(3, 1fr);
        grid-template-areas:
      'meta meta meta'
      'main main aside';
  }

  /* ------------------------------------------------------------------------- */
  /* TEMPORARY: grid-areas repeated so autoprefixer can work with ie prefixes  */
  /* https://github.com/postcss/autoprefixer/issues/954#issuecomment-351697378 */
  /* ------------------------------------------------------------------------- */
  .neop-sidebar-grid > header {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 3;
    grid-area: meta;
  }

  .neop-sidebar-grid > section {
    -ms-grid-row: 2;
    -ms-grid-column: 1;
    -ms-grid-column-span: 2;
    grid-area: main;
  }

  .neop-sidebar-grid > aside {
    -ms-grid-row: 2;
    -ms-grid-column: 3;
    grid-area: aside;
  }
  /* ------------------------------------------------------------------------- */
  /* ------------------------------------------------------------------------- */
}