﻿.article-collection {
  width: 100%;
  margin: 80px auto; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .article-collection {
      margin: 64px 0; } }
  @media (max-width: 767px) {
    .article-collection {
      margin: 40px 0; } }
  .article-collection.grey {
    width: 100%;
    margin: 0 auto;
    padding: 80px 0;
    background-color: #F8F8F8; }
    @media only screen and (min-width: 768px) and (max-width: 1024px) {
      .article-collection.grey {
        padding: 64px 0; } }
    @media (max-width: 767px) {
      .article-collection.grey {
        padding: 40px 0; } }
    .article-collection.grey .wrapper {
      margin: 0 auto; }
      .article-collection.grey .wrapper .articles {
        margin-bottom: 0px; }
        @media (max-width: 767px) {
          .article-collection.grey .wrapper .articles {
            margin-bottom: 24px; } }
  @media (max-width: 767px) {
    .article-collection {
      margin-bottom: 64px; } }
  .article-collection .wrapper {
    width: 100%;
    max-width: 1204px;
    margin: 48px auto; }
    @media only screen and (min-width: 1024px) and (max-width: 1204px) {
      .article-collection .wrapper {
        padding: 0 24px; } }
    @media only screen and (min-width: 768px) and (max-width: 1024px) {
      .article-collection .wrapper {
        margin: 32px auto;
        padding: 0 24px; } }
    @media (max-width: 767px) {
      .article-collection .wrapper {
        margin: 24px auto;
        padding: 0 20px; } }
    @media only screen and (min-width: 768px) and (max-width: 1024px) {
      .article-collection .wrapper h2 {
        width: calc(100% - 4.5em); } }
    .article-collection .wrapper .articles {
      width: calc(100% + 20px);
      margin: 48px -10px; }
      @media only screen and (min-width: 1025px) {
        .article-collection .wrapper .articles {
          display: grid;
          display: -ms-grid;
          grid-template-columns: 25% 25% 25% 25%;
          -ms-grid-columns: 25% 25% 25% 25%; }
          .article-collection .wrapper .articles .article-small {
            /* Grid support for IE11 */ }
            .article-collection .wrapper .articles .article-small:nth-of-type(1) {
              grid-column: 1 / span 2;
              grid-row: 1 / span 2;
              width: auto;
              height: auto; }
              .article-collection .wrapper .articles .article-small:nth-of-type(1) .article-small-link .article-small-image {
                height: 380px; }
              .article-collection .wrapper .articles .article-small:nth-of-type(1) .article-small-link .article-small-text {
                min-height: 13.626em; }
                .article-collection .wrapper .articles .article-small:nth-of-type(1) .article-small-link .article-small-text h3 {
                  display: block;
                  margin-bottom: 6px; }
            .article-collection .wrapper .articles .article-small:nth-of-type(1) {
              -ms-grid-column: 1;
              -ms-grid-column-span: 2;
              -ms-grid-row: 1;
              -ms-grid-row-span: 2; }
            .article-collection .wrapper .articles .article-small:nth-of-type(2) {
              -ms-grid-column: 3;
              -ms-grid-row: 1; }
            .article-collection .wrapper .articles .article-small:nth-of-type(3) {
              -ms-grid-column: 4;
              -ms-grid-row: 1; }
            .article-collection .wrapper .articles .article-small:nth-of-type(4) {
              -ms-grid-column: 3;
              -ms-grid-row: 2; }
            .article-collection .wrapper .articles .article-small:nth-of-type(5) {
              -ms-grid-column: 4;
              -ms-grid-row: 2; }
            .article-collection .wrapper .articles .article-small:nth-of-type(6) {
              -ms-grid-column: 1;
              -ms-grid-row: 3; }
            .article-collection .wrapper .articles .article-small:nth-of-type(7) {
              -ms-grid-column: 2;
              -ms-grid-row: 3; }
            .article-collection .wrapper .articles .article-small:nth-of-type(8) {
              -ms-grid-column: 3;
              -ms-grid-row: 3; }
            .article-collection .wrapper .articles .article-small:nth-of-type(9) {
              -ms-grid-column: 4;
              -ms-grid-row: 3; }
            .article-collection .wrapper .articles .article-small:nth-of-type(10) {
              -ms-grid-column: 1;
              -ms-grid-row: 4; }
            .article-collection .wrapper .articles .article-small:nth-of-type(11) {
              -ms-grid-column: 2;
              -ms-grid-row: 4; }
            .article-collection .wrapper .articles .article-small:nth-of-type(12) {
              -ms-grid-column: 3;
              -ms-grid-row: 4; }
            .article-collection .wrapper .articles .article-small:nth-of-type(13) {
              -ms-grid-column: 4;
              -ms-grid-row: 4; }
            .article-collection .wrapper .articles .article-small:nth-of-type(14) {
              -ms-grid-column: 1;
              -ms-grid-row: 5; }
            .article-collection .wrapper .articles .article-small:nth-of-type(15) {
              -ms-grid-column: 2;
              -ms-grid-row: 5; }
            .article-collection .wrapper .articles .article-small:nth-of-type(16) {
              -ms-grid-column: 3;
              -ms-grid-row: 5; }
            .article-collection .wrapper .articles .article-small:nth-of-type(17) {
              -ms-grid-column: 4;
              -ms-grid-row: 5; }
            .article-collection .wrapper .articles .article-small:nth-of-type(18) {
              -ms-grid-column: 1;
              -ms-grid-row: 6; }
            .article-collection .wrapper .articles .article-small:nth-of-type(19) {
              -ms-grid-column: 2;
              -ms-grid-row: 6; }
            .article-collection .wrapper .articles .article-small:nth-of-type(20) {
              -ms-grid-column: 3;
              -ms-grid-row: 6; }
            .article-collection .wrapper .articles .article-small:nth-of-type(21) {
              -ms-grid-column: 4;
              -ms-grid-row: 6; }
            .article-collection .wrapper .articles .article-small:nth-of-type(22) {
              -ms-grid-column: 1;
              -ms-grid-row: 7; }
            .article-collection .wrapper .articles .article-small:nth-of-type(23) {
              -ms-grid-column: 2;
              -ms-grid-row: 7; }
            .article-collection .wrapper .articles .article-small:nth-of-type(24) {
              -ms-grid-column: 3;
              -ms-grid-row: 7; }
            .article-collection .wrapper .articles .article-small:nth-of-type(25) {
              -ms-grid-column: 4;
              -ms-grid-row: 7; }
            .article-collection .wrapper .articles .article-small:nth-of-type(26) {
              -ms-grid-column: 1;
              -ms-grid-row: 8; }
            .article-collection .wrapper .articles .article-small:nth-of-type(27) {
              -ms-grid-column: 2;
              -ms-grid-row: 8; }
            .article-collection .wrapper .articles .article-small:nth-of-type(28) {
              -ms-grid-column: 3;
              -ms-grid-row: 8; }
            .article-collection .wrapper .articles .article-small:nth-of-type(29) {
              -ms-grid-column: 4;
              -ms-grid-row: 8; }
            .article-collection .wrapper .articles .article-small:nth-of-type(30) {
              -ms-grid-column: 1;
              -ms-grid-row: 9; }
            .article-collection .wrapper .articles .article-small:nth-of-type(31) {
              -ms-grid-column: 2;
              -ms-grid-row: 9; }
            .article-collection .wrapper .articles .article-small:nth-of-type(32) {
              -ms-grid-column: 3;
              -ms-grid-row: 9; }
            .article-collection .wrapper .articles .article-small:nth-of-type(33) {
              -ms-grid-column: 4;
              -ms-grid-row: 9; } }
      @media only screen and (min-width: 768px) and (max-width: 1024px) {
        .article-collection .wrapper .articles {
          margin-top: 32px;
          display: flex;
          flex-wrap: wrap; } }
      @media (max-width: 767px) {
        .article-collection .wrapper .articles {
          margin-top: 24px; } }
