.info-main-head {
  img {
    width: 100%;
  }
}

.info-wrapper {
  @extend %flexbox-column;

  @include breakpoint(md) {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    -ms-grid-rows: 1fr 1fr;

    grid-gap: 0 $margin-quadruple;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(2, auto);
  }
}

.info-navigation {
  @include breakpoint(md) {
    -ms-grid-column: 1;
    -ms-grid-row: 1;
    -ms-grid-row-span: 2;

    grid-column: 1;
    grid-row: 1 / span 2;
  }

  ul {
    @extend %flexbox-column;
    justify-content: space-between;
    background: $color-beige-100;
  }
}

.info-article {
  order: 2;

  a {
    word-break: break-word;
  }

  @include breakpoint(sm) {
    -ms-grid-column: 3;
    -ms-grid-column-span: 6;
    display: -ms-grid;
    -ms-grid-columns: 1fr 1fr 1fr 1fr 1fr 1fr;

    &.no-left-column {
      -ms-grid-column: 1;
      -ms-grid-column-span: 8;
    }

    @supports (display: grid) {
      display: grid;
      grid-column: 3 / span 6;
      grid-template-columns: repeat(6, 1fr);
      grid-gap: 0 $margin-quadruple;

      &.no-left-column {
        grid-column: 1 / span 8;
      }
    }
  }
}

.articlepage {
  .blog-card {
    width: calc(50% - 12px);
    @include breakpoint(sm) {
      width: calc(33.3333% - 12px);
    }
  }
}

.info-breadcrumb {
  -ms-grid-column: 1;
  -ms-grid-column-span: 5;
  margin: 0 $margin-quadruple $margin-normal;

  @supports (display: grid) {
    grid-column: 1 / span 5;
    margin: 0 0 $margin-normal;
  }
}

.info-page-intro {
  margin: 0 $margin-quadruple;

  @include breakpoint(sm) {
    -ms-grid-column: 1;
    -ms-grid-column-span: 5;
    -ms-grid-row: 2;

    grid-column: 1 / span 5;
    grid-row: 2;
  }

  @supports (display: grid) {
    margin: 0;
  }

  .preamble {
    margin-bottom: $margin-normal;
  }
}

.info-body {
  margin: 0 $margin-quadruple;

  @include breakpoint(sm) {
    -ms-grid-column: 1;
    -ms-grid-column-span: 4;
    -ms-grid-row: 3;

    grid-column: 1 / span 4;
    grid-row: 3;

    &.full-width-column {
      -ms-grid-column: 1;
      -ms-grid-column-span: 6;
      grid-column: 1 / span 6;
    }
  }

  @supports (display: grid) {
    margin: 0;
  }
}

.info-aside {
  @include breakpoint(sm) {
    -ms-grid-column: 5;
    -ms-grid-column-span: 2;
    -ms-grid-row: 3;

    grid-column: 5 / span 2;
    grid-row: 3;
  }
}

// @martin or @emil, do this the right way please...
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .info-cards.text-cards {
    display: block;
    width: 100%;
  }

  .info-cards.text-cards:after {
    content: '';
    display: table;
    clear: both;
  }

  .info-cards.text-cards > .info-text-card {
    float: left;
    width: 46%;
    min-height: 160px;
    margin-bottom: 20px;
  }

  .info-cards.text-cards > .info-text-card:nth-child(2n) {
    margin-left: 20px;
  }
}