/* Layout */
main {
  width: 90%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 4em 0 0; }
  @media only screen and (max-width: 821px) {
    main {
      width: 100%;
      padding: 2em 0 0; } }

.container {
  width: 90%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 2em 0 0; }
  @media only screen and (max-width: 821px) {
    .container {
      width: 100%;
      max-width: 100%;
      padding: 3em 1em 0; } }

section {
  margin-bottom: 4em; }
  @media only screen and (max-width: 821px) {
    section {
      margin-bottom: 2em; } }
  section:last-child {
    margin-bottom: 0; }
  section section {
    margin-bottom: 4em; }
    @media only screen and (max-width: 821px) {
      section section {
        margin-bottom: 2em; } }
    section section:last-child {
      margin-bottom: 0; }

.row {
  margin-bottom: 2em; }
  @media only screen and (max-width: 821px) {
    .row {
      margin-bottom: 1em; } }
  section .row:last-child {
    margin-bottom: 0; }

@media only screen and (max-width: 821px) {
  .grid {
    margin-bottom: 0em; } }
.row .grid:last-child {
  margin-bottom: 0; }

/* Grid System */
.row {
  display: grid;
  grid-gap: 2em; }
  @media only screen and (max-width: 821px) {
    .row {
      grid-gap: 1em; } }

.row-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr); }
  @media only screen and (max-width: 821px) {
    .row-2 {
      grid-template-columns: repeat(1, 1fr); } }

.row-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr); }
  @media only screen and (max-width: 821px) {
    .row-3 {
      grid-template-columns: repeat(1, 1fr); } }

.row-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr); }
  @media only screen and (max-width: 821px) {
    .row-4 {
      grid-template-columns: repeat(2, 1fr); } }

.row-5 {
  grid-template-columns: repeat(5, 1fr); }
  @media only screen and (max-width: 821px) {
    .row-5 {
      grid-template-columns: repeat(5, 1fr); } }

.row-6 {
  display: grid;
  grid-template-columns: repeat(6, 1fr); }
  @media only screen and (max-width: 821px) {
    .row-6 {
      grid-template-columns: repeat(6, 1fr); } }

.row-8 {
  display: grid;
  grid-template-columns: repeat(8, 1fr); }
  @media only screen and (max-width: 821px) {
    .row-8 {
      grid-template-columns: repeat(4, 1fr); } }

.row-3-9 {
  display: grid;
  grid-template-columns: 3fr 9fr; }
  @media only screen and (max-width: 821px) {
    .row-3-9 {
      grid-template-columns: repeat(1, 1fr); } }

.row-4-8 {
  display: grid;
  grid-template-columns: 4fr 8fr; }
  @media only screen and (max-width: 821px) {
    .row-4-8 {
      grid-template-columns: repeat(1, 1fr); } }

.row-5-7 {
  display: grid;
  grid-template-columns: 5fr 7fr; }
  @media only screen and (max-width: 821px) {
    .row-5-7 {
      grid-template-columns: repeat(1, 1fr); } }

.row-8-4 {
  display: grid;
  grid-template-columns: 8fr 4fr; }
  @media only screen and (max-width: 821px) {
    .row-8-4 {
      grid-template-columns: repeat(1, 1fr); } }

.row-9-3 {
  display: grid;
  grid-template-columns: 9fr 3fr; }
  @media only screen and (max-width: 821px) {
    .row-9-3 {
      grid-template-columns: repeat(1, 1fr); } }

/* Contents */
.content {
  display: grid;
  grid-template-columns: 2fr 10fr;
  grid-gap: 2em; }
  @media only screen and (max-width: 821px) {
    .content {
      display: block; } }
  @media only screen and (max-width: 821px) {
    .content .side {
      margin-bottom: 2em; } }

/*# sourceMappingURL=layout.css.map */