﻿.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);
        min-height: 1.2em; } }
    .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 {
                  font-weight: bold;
                  margin-bottom: 6px;
                  font-size: 1.5em;
                  line-height: 1.2em; }
                .article-collection .wrapper .articles .article-small:nth-of-type(1) .article-small-link .article-small-text .big-text.description {
                  display: block; }
                .article-collection .wrapper .articles .article-small:nth-of-type(1) .article-small-link .article-small-text .big-text {
                  max-height: 108px;
                  display: -webkit-box;
                  -webkit-line-clamp: 4;
                  -webkit-box-orient: vertical; }
            .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; }
          .article-collection .wrapper .articles .article-small .reading-time-big-article {
            font-size: 1rem;
            font-weight: normal;
            line-height: 24px;
            position: relative;
            bottom: 3px;
            margin-right: 20px; }
            .article-collection .wrapper .articles .article-small .reading-time-big-article::before {
              content: ".";
              width: 10px;
              height: 10px;
              position: absolute;
              top: -10px;
              right: -17px;
              font-size: 30px; }
              .ltr .article-collection .wrapper .articles .article-small .reading-time-big-article::before {
                right: auto;
                left: -17px; }
            .ltr .article-collection .wrapper .articles .article-small .reading-time-big-article {
              margin: 0 0 0 20px; } }
      @media (max-width: 1204px) {
        .article-collection .wrapper .articles {
          grid-template-columns: calc((100% - 305px * 2) / 2) calc((100% - 305px * 2) / 2) 305px 305px;
          -ms-grid-columns: calc((100% - 305px * 2) / 2) calc((100% - 305px * 2) / 2) 305px 305px; } }
      @media (max-width: 1024px) {
        .article-collection .wrapper .articles .article-small {
          width: 285px; }
          .article-collection .wrapper .articles .article-small h3.title.is-first-and-has-read-time {
            position: relative;
            padding-top: 24px;
            max-height: 75px; }
            .article-collection .wrapper .articles .article-small h3.title.is-first-and-has-read-time .reading-time-big-article {
              position: absolute;
              top: 0;
              right: 0;
              font-weight: normal;
              font-size: 14px; }
              .ltr .article-collection .wrapper .articles .article-small h3.title.is-first-and-has-read-time .reading-time-big-article {
                right: auto;
                left: 0; } }
      @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; } }
    .article-collection .wrapper > .button-link {
      border: none;
      background-color: transparent;
      display: block;
      margin: 38px auto 0; }
      .article-collection .wrapper > .button-link a {
        margin: 0; }
