News Centre Block

/* @news-centre-block  */
.news-centre-block   {
  // @include poly-margin--large;
  @include poly-padding;
  @include container;

  @media (min-width: $large-screen) {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 50px auto;

    @include poly-grid-gap;
  }

  &__header {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 100%;
    align-items: center;
    grid-column: 1/4;
    grid-row: 1/1;

    h3 {
      font-size: $medium-font;
    }

    div {
      justify-self: right;
      
      a {
        font-weight: 900;
      }
    }
  }

  &__content {

    .article-teaser__title {
      font-size: 14px;
      display: block;
    }

    .article-teaser__category {
      text-transform: uppercase;
      font-size: $x-small-font;
      font-family: 'Biryani', sans-serif;
      font-weight: 200;
      color: $red-ribbon;
      letter-spacing: 3px;
    }

    &::after {
      content: 'flickity';
      display: none;

      @media (min-width: $large-screen) {
        content: '';
      }
    }

    &.flickity-enabled {
      .slide {
        @media (max-width: $large-screen) {
          width: 70%;
          margin-right: 10px;
          padding-bottom: 35px;

          &.is-previous {
            z-index: -1;
          }

          &.is-next {
            z-index: 1;
          }

          .article-teaser {
            box-shadow: $box-shadow-big;

            &__image {
              height: 210px;
              overflow: hidden;

              img {
                position: relative;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
              }
            }
          }
        }

        .article-teaser {
          &__image {
            @media (max-width: $medium-screen) {
              height: 160px;
            }

            @media (max-width: $small-screen) {
              height: 110px;
            }
          }

          &__content {
            @include poly-padding-bottom;
          }
        }
      }
    }

    @media (min-width: $large-screen) {
      grid-column: 1/4;
      grid-row: 2/2;
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      grid-template-rows: 80px 80px 80px;

      @include poly-grid-gap;

      > div {
        &:first-child {
          grid-column: 1/2;
        }

        &:nth-child(2) {
          grid-column: 2/3;
        }

        &:first-child,
        &:nth-child(2) { 
          grid-row: 1/ span 3;
          padding-right: 10px;

          .article-teaser__content {
            padding-left: 0;
          }

          .article-teaser__image {
            height: 170px;
            overflow: hidden;

            img {
              position: relative;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
            }
          }
        }

        &:nth-child(3),
        &:nth-child(4),
        &:nth-child(5) {
          grid-column: 3/3;

          .article-teaser {
            display: flex;
            flex-flow: row nowrap;
            height: 85%;

            &__image {
              width: 100px;
            }

            &__title {
              max-width: 200px;
              flex: 1;
            }

            &__category {
              display: none;
            }
          }

          a {
            overflow: hidden;
            
            img {
              position: relative;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
            }
          }
        }

        &:nth-child(3) {
          grid-row: 1/1;
        }

        &:nth-child(4) {
          grid-row: 2/2;
        }

        &:nth-child(5) {
          grid-row: 3/3;
        }
      }
    }
  }
}