.tui-section.blog-archive-heading {
  margin-bottom: 0;
  padding-bottom: 0;
}

.blog-post,
.blog-header {
  h1 {
    @include font-size(24);
    text-transform: none;
    hyphens: none;
    margin-bottom: $margin-double;

    @include breakpoint(sm) {
      @include font-size(54);
    }
  }
}

.blog-post {
  .blog-heading-section {
    padding-top: 0;
  }

  .blog-header-wrapper.tui-section.tui-container[class*=background-tui-] {
    position: relative;
    z-index: 10;
    margin-top: -$margin-double;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    padding: $margin-normal $margin-normal 0;

    @include breakpoint(sm) {
      border-radius: $border-radius-double $border-radius-double 0 0;
      flex-direction: row;
      padding: $margin-double $margin-triple 0;
    }

    .tingle-modal-box & { margin-top: 0; }

    .breadcrumb {
      @extend %flexbox-row;

      .tui-breadcrumb {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-weight: bold;
        margin-left: -5px;
        margin-bottom: $margin-normal;

        /* stylelint-disable max-nesting-depth */
        li {
          display: inline;
        }
        /* stylelint-enable */
      }

      .date {
        display: none;
        color: $color-grey;
        white-space: nowrap;

        /* stylelint-disable max-nesting-depth */
        @include breakpoint(sm) {
          display: block;
          margin-left: $margin-double;
        }
        /* stylelint-enable */
      }
    }

    .author {
      @extend %flexbox-column;
      @include font-size(12);

      @include breakpoint(sm) {
        @include font-size(18);
      }

      .name-and-image-container {
        @extend %flexbox-row;
        align-items: center;
      }

      img {
        border-radius: 100%;
        width: 36px;
        height: 36px;
        margin: $margin-half 0;
        order: 1;
        /* stylelint-disable max-nesting-depth */
        @include breakpoint(sm) {
          order: 2;
          width: 72px;
          height: 72px;
          margin-left: $margin-normal;
        }
        /* stylelint-enable */
      }

      .name {
        display: inline-block;
        padding-left: $margin-normal;
        width: max-content;
        order: 2;
        /* stylelint-disable max-nesting-depth */
        @include breakpoint(sm) {
          order: 1;
        }
        /* stylelint-enable */
      }

      .date {
        display: block;
        color: $color-grey;
        /* stylelint-disable max-nesting-depth */
        @include breakpoint(sm) {
          display: none;
        }
        /* stylelint-enable */
      }
    }
  }

  .blog-body {
    @include breakpoint(sm) {
      width: 70%;
      padding: 0 $margin-double;
    }

    .preamble {
      @include font-size(16);
      font-weight: bold;
      margin-bottom: $margin-normal;

      @include breakpoint(sm) {
        @include font-size(18);
      }
    }

    .tui-text-content {
      @include font-size(16);

      @include breakpoint(sm) {
        @include font-size(18);
        padding: 0;
      }

      & > a {
        display: inline-block;
      }
    }

    .list {
      padding-left: 0;
    }

    blockquote {
      margin: $margin-triple auto;

      p::before {
        left: -$margin-triple;
      }

      p::after {
        right: -$margin-enterprise;
      }
    }

    .cta-button {
      margin-bottom: $margin-quadruple;
    }
  }

  h2,
  h3 {
    margin-bottom: $margin-normal;

    a {
      color: $color-link-blue;
    }
  }

  .image {
    margin-bottom: $margin-double;
  }

  .blog-tags-list {
    margin-top: $margin-quadruple;
  }

  .blog-post-main {
    padding: $margin-normal;
    margin-bottom: $margin-double;
    border-radius: 0 0 $border-radius-double $border-radius-double;

    @include breakpoint(xs) {
      [class*=' ratio'],
      [class^=ratio-],
      .videoplayer,
      .gallery {
        margin-left: -$margin-half;
        margin-right: -$margin-half;
      }
    }
  }

  .videoplayer {
    margin-bottom: $margin-double;
  }
}

.blog-categories,
.blog-more-inspiration {
  margin-bottom: $margin-double;

  div {
    @include font-size(20);
    margin: 0 $margin-half 0 0;

    @include breakpoint(sm) {
      margin: 0;
    }

    a {
      font-weight: bold;
      text-decoration: underline;
      display: inline-block;
      padding: $margin-quarter $margin-half;

      @include breakpoint(sm) {
        /* stylelint-disable max-nesting-depth */
        &:first-child {
          padding-left: 0;
        }
        /* stylelint-enable */
      }
    }
  }
}

.blog-tags {
  margin-bottom: $margin-double;

  .show-hide-cards:not(.show-all) {
    @include breakpoint(xs) {
      .tui-tag-link:nth-child(n+6) {
        display: none;
      }
    }

    @include breakpoint(sm) {
      .show-more-items-strike-text {
        display: none;
      }
    }
  }

  .tui-tag-links {
    .tui-tag-link {
      width: auto;
      margin: 0 $margin-half $margin-normal 0;
    }
  }
}

.blog-overview-page {
  header {
    display: flex;
    align-items: baseline;
    padding: $margin-half;

    @include breakpoint(sm) {
      padding: 0;
      margin-bottom: $margin-enterprise;
    }

    .show-more {
      font-weight: bold;
      padding-left: $margin-double;
    }
  }

  .tui-section {
    padding: $margin-normal $margin-half 0;

    @include breakpoint(sm) {
      padding: $margin-enterprise $margin-half;
    }

    &:first-child {
      padding-top: $margin-normal;
    }

    header:first-child {
      margin-top: $margin-normal;
    }
  }
}