.no-overflow {
  overflow: hidden;
}

.skeleton .card--stream {
  padding: 0 !important;
  container: card/inline-size;
}

/* Activity stream block */
.post-block-skeleton {
  height: calc(1.25rem + 130px + 1.25rem);
}

.post-block-skeleton:empty::after {
  clear: both;
  content: "";
  display: block;
  height: 100%;
  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0) 100%), linear-gradient(#efefef 80px, transparent 0), linear-gradient(#efefef 24px, transparent 0), linear-gradient(#efefef 24px, transparent 0), linear-gradient(#efefef 24px, transparent 0), radial-gradient(circle 22px at center, #efefef 99%, transparent 0), linear-gradient(white calc(1.25rem + 130px + 1.25rem), transparent 0);
  background-size: 200px calc(calc(1.25rem + 130px + 1.25rem)), calc(100% - calc(1.25rem + 44px + 31px)) 80px, 80px 12px, 80px 24px, 80px 24px, 44px 44px, 100% 100%;
  background-position: -150% 0, 75px 1.25rem, left 75px top 108px, right 125px top 128px, right 1.25rem top 128px, 1.25rem 1.25rem, 0 0;
  background-repeat: no-repeat;
  -webkit-animation: loading-post-block 4s infinite;
          animation: loading-post-block 4s infinite;
}

@-webkit-keyframes loading-post-block {
  to {
    background-position: 350% 0, 75px 1.25rem, left 75px top 108px, right 125px top 128px, right 1.25rem top 128px, 1.25rem 1.25rem, 0 0;
  }
}

@keyframes loading-post-block {
  to {
    background-position: 350% 0, 75px 1.25rem, left 75px top 108px, right 125px top 128px, right 1.25rem top 128px, 1.25rem 1.25rem, 0 0;
  }
}

/* Top block showing author and name */
.media-skeleton {
  height: calc(1.25rem + 44px + 1.25rem);
}

.media-skeleton:empty::after {
  clear: both;
  content: "";
  display: block;
  height: 100%;
  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0) 100%), linear-gradient(#efefef 12px, transparent 0), linear-gradient(#efefef 12px, transparent 0), radial-gradient(circle 22px at center, #efefef 99%, transparent 0), linear-gradient(white calc(1.25rem + 44px + 1.25rem), transparent 0);
  background-size: 200px calc(calc(1.25rem + 44px + 1.25rem)), 25% 12px, 50% 12px, 44px 44px, 100% 100%;
  background-position: -150% 0, left 75px top calc(1.25rem + 6px), left 75px top calc(1.25rem + 24px), 1.25rem 1.25rem, 0 0;
  background-repeat: no-repeat;
  -webkit-animation: loading-media 4s infinite;
          animation: loading-media 4s infinite;
}

@-webkit-keyframes loading-media {
  to {
    background-position: 350% 0, left 75px top calc(1.25rem + 6px), left 75px top calc(1.25rem + 24px), 1.25rem 1.25rem, 0 0;
  }
}

@keyframes loading-media {
  to {
    background-position: 350% 0, left 75px top calc(1.25rem + 6px), left 75px top calc(1.25rem + 24px), 1.25rem 1.25rem, 0 0;
  }
}

/* Teaser block with big image left and description right */
.teaser-skeleton {
  height: calc(152px + 1.25rem);
}

.teaser-skeleton:empty::after {
  clear: both;
  content: "";
  display: block;
  height: 100%;
  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0) 100%), linear-gradient(#efefef 152px, transparent 0), linear-gradient(#efefef 12px, transparent 0), linear-gradient(#efefef 24px, transparent 0), linear-gradient(#efefef 24px, transparent 0), linear-gradient(#efefef 12px, transparent 0), linear-gradient(#efefef 12px, transparent 0), linear-gradient(#efefef 24px, transparent 0), linear-gradient(white calc(152px + 1.25rem), transparent 0);
  background-size: 200px calc(calc(152px + 1.25rem)), 152px 152px, 80px, calc(100% - calc(1.25rem + 152px + 56px)), calc(75% - calc(1.25rem + 152px)), 80px, 11%, 80px, 100% 100%;
  background-position: -150% 0, left 1.25rem top 0px, left 208px top 20px, left 208px top 40px, left 208px top 68px, left 208px top 108px, left 304px top 108px, right calc(1.25rem) top 132px, 0 0;
  background-repeat: no-repeat;
  -webkit-animation: loading-teaser 4s infinite;
          animation: loading-teaser 4s infinite;
}

@-webkit-keyframes loading-teaser {
  to {
    background-position: 350% 0, left 1.25rem top 0px, left 208px top 20px, left 208px top 40px, left 208px top 68px, left 208px top 108px, left 304px top 108px, right calc(1.25rem) top 132px, 0 0;
  }
}

@keyframes loading-teaser {
  to {
    background-position: 350% 0, left 1.25rem top 0px, left 208px top 20px, left 208px top 40px, left 208px top 68px, left 208px top 108px, left 304px top 108px, right calc(1.25rem) top 132px, 0 0;
  }
}

@container card (max-width: 350px) {
  .teaser-skeleton:empty::after {
    background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0) 100%), linear-gradient(#efefef 152px, transparent 0), linear-gradient(#efefef 12px, transparent 0), linear-gradient(#efefef 24px, transparent 0), linear-gradient(#efefef 24px, transparent 0), linear-gradient(#efefef 12px, transparent 0), linear-gradient(#efefef 24px, transparent 0), linear-gradient(white calc(152px + 1.25rem), transparent 0);
    background-size: 200px calc(calc(152px + 1.25rem)), 152px 152px, 80px, calc(100% - calc(1.25rem + 152px + 56px)), calc(75% - calc(1.25rem + 152px)), 80px, 80px, 100% 100%;
    background-position: -150% 0, left 1.25rem top 0px, left 208px top 20px, left 208px top 40px, left 208px top 68px, left 208px top 108px, right calc(1.25rem) top 132px, 0 0;
    background-repeat: no-repeat;
    -webkit-animation: loading-teaser-mob 4s infinite;
            animation: loading-teaser-mob 4s infinite;
  }
  @-webkit-keyframes loading-teaser-mob {
    to {
      background-position: 350% 0, left 1.25rem top 0px, left 208px top 20px, left 208px top 40px, left 208px top 68px, left 208px top 108px, right calc(1.25rem) top 132px, 0 0;
    }
  }
  @keyframes loading-teaser-mob {
    to {
      background-position: 350% 0, left 1.25rem top 0px, left 208px top 20px, left 208px top 40px, left 208px top 68px, left 208px top 108px, right calc(1.25rem) top 132px, 0 0;
    }
  }
}

.teaser-small-skeleton {
  height: calc(1.25rem + 44px + 1.25rem);
}

.teaser-small-skeleton:empty::after {
  clear: both;
  content: "";
  display: block;
  height: 100%;
  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0) 100%), linear-gradient(#efefef 12px, transparent 0), linear-gradient(#efefef 12px, transparent 0), radial-gradient(circle 22px at center, #efefef 99%, transparent 0), linear-gradient(white calc(1.25rem + 44px + 1.25rem), transparent 0);
  background-size: 200px calc(calc(1.25rem + 44px + 1.25rem)), 50% 12px, 25% 12px, 44px 44px, 100% 100%;
  background-position: -150% 0, left 75px top calc(1.25rem + 6px), left 75px top calc(1.25rem + 24px), 1.25rem 1.25rem, 0 0;
  background-repeat: no-repeat;
  -webkit-animation: loading-media 4s infinite;
          animation: loading-media 4s infinite;
}

@keyframes loading-media {
  to {
    background-position: 350% 0, left 75px top calc(1.25rem + 6px), left 75px top calc(1.25rem + 24px), 1.25rem 1.25rem, 0 0;
  }
}

/* Post block without avatar and just the post description */
.post-skeleton {
  height: calc(80px + 1.25rem);
}

.post-skeleton:empty::after {
  clear: both;
  content: "";
  display: block;
  height: 100%;
  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0) 100%), linear-gradient(#efefef 24px, transparent 0), linear-gradient(#efefef 24px, transparent 0), linear-gradient(#efefef 12px, transparent 0), linear-gradient(white calc(80px + 1.25rem), transparent 0);
  background-size: 200px calc(calc(80px + 1.25rem)), calc(100% - calc(1.25rem * 2)), 51%, 80px, 100% 100%;
  background-position: -150% 0, left 1.25rem top 0px, left 1.25rem top 28px, left 1.25rem top 68px, 0 0;
  background-repeat: no-repeat;
  -webkit-animation: loading-post 4s infinite;
          animation: loading-post 4s infinite;
}

@-webkit-keyframes loading-post {
  to {
    background-position: 350% 0, left 1.25rem top 0px, left 1.25rem top 28px, left 1.25rem top 68px, 0 0;
  }
}

@keyframes loading-post {
  to {
    background-position: 350% 0, left 1.25rem top 0px, left 1.25rem top 28px, left 1.25rem top 68px, 0 0;
  }
}

/* Teaser block with big image on top and description on bottom */
.big-teaser-skeleton {
  /* End variables */
  height: 320px;
}

.big-teaser-skeleton:empty::after {
  clear: both;
  content: "";
  display: block;
  height: 100%;
  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0) 100%), linear-gradient(#efefef 200px, transparent 0), linear-gradient(#efefef 24px, transparent 0), linear-gradient(#efefef 24px, transparent 0), linear-gradient(#efefef 12px, transparent 0), linear-gradient(white 320px, transparent 0);
  background-size: 200px calc(320px), calc(100% - calc(1.25rem + 21px)) 200px, calc(100% - calc(1.25rem + 21px)) 24px, 51% 24px, 80px 12px, 100% 100%;
  background-position: -150% 0, 1.25rem 0, left 1.25rem top 220px, left 1.25rem top 248px, left 1.25rem top 288px, 0 0;
  background-repeat: no-repeat;
  -webkit-animation: loading-big-teaser 4s infinite;
          animation: loading-big-teaser 4s infinite;
}

@-webkit-keyframes loading-big-teaser {
  to {
    background-position: 350% 0, 1.25rem 0, left 1.25rem top 220px, left 1.25rem top 248px, left 1.25rem top 288px, 0 0;
  }
}

@keyframes loading-big-teaser {
  to {
    background-position: 350% 0, 1.25rem 0, left 1.25rem top 220px, left 1.25rem top 248px, left 1.25rem top 288px, 0 0;
  }
}

/* Comment block with author left and big comment right */
.comment-skeleton {
  /* End variables */
  height: calc(64px + 1.25rem);
}

.comment-skeleton:empty::after {
  clear: both;
  content: "";
  display: block;
  height: 100%;
  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0) 100%), linear-gradient(#efefef 64px, transparent 0), linear-gradient(#efefef 24px, transparent 0), radial-gradient(circle 22px at center, #efefef 99%, transparent 0), linear-gradient(white calc(64px + 1.25rem), transparent 0);
  background-size: 200px calc(calc(64px + 1.25rem)), calc(100% - calc(1.25rem + 44px + 130px)) 64px, 80px 24px, 44px 44px, 100% 100%;
  background-position: -150% 0, 75px 0, right 1.25rem top 0, 1.25rem 0, 0 0;
  background-repeat: no-repeat;
  -webkit-animation: loading-comment 4s infinite;
          animation: loading-comment 4s infinite;
}

@-webkit-keyframes loading-comment {
  to {
    background-position: 350% 0, 75px 0, right 1.25rem top 0, 1.25rem 0, 0 0;
  }
}

@keyframes loading-comment {
  to {
    background-position: 350% 0, 75px 0, right 1.25rem top 0, 1.25rem 0, 0 0;
  }
}

/* Comment block with author left and small comment right - variation 1 */
.comment-2-skeleton {
  height: 80px;
}

.comment-2-skeleton:empty::after {
  clear: both;
  content: "";
  display: block;
  height: 100%;
  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0) 100%), linear-gradient(#efefef 12px, transparent 0), linear-gradient(#efefef 12px, transparent 0), linear-gradient(#efefef 12px, transparent 0), linear-gradient(#efefef 12px, transparent 0), radial-gradient(circle 22px at center, #efefef 99%, transparent 0), linear-gradient(white 80px, transparent 0);
  background-size: 200px calc(80px), 80px 12px, calc(30% - calc(1.25rem + 44px + 31px)) 12px, calc(65% - calc(1.25rem + 44px + 31px)) 12px, 80px 12px, 44px 44px, 100% 100%;
  background-position: -150% 0, left 75px top 0, left calc(80px + 95px) top 0, left 75px top 16px, left 75px top 44px, 1.25rem 0, 0 0;
  background-repeat: no-repeat;
  -webkit-animation: loading-comment-2 4s infinite;
          animation: loading-comment-2 4s infinite;
}

@-webkit-keyframes loading-comment-2 {
  to {
    background-position: 350% 0, left 75px top 0, left calc(80px + 95px) top 0, left 75px top 16px, left 75px top 44px, 1.25rem 0, 0 0;
  }
}

@keyframes loading-comment-2 {
  to {
    background-position: 350% 0, left 75px top 0, left calc(80px + 95px) top 0, left 75px top 16px, left 75px top 44px, 1.25rem 0, 0 0;
  }
}

/* Comment block with author left and small comment right - variation 2 */
.comment-3-skeleton {
  height: 80px;
}

.comment-3-skeleton:empty::after {
  clear: both;
  content: "";
  display: block;
  height: 100%;
  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0) 100%), linear-gradient(#efefef 12px, transparent 0), linear-gradient(#efefef 12px, transparent 0), linear-gradient(#efefef 12px, transparent 0), linear-gradient(#efefef 12px, transparent 0), radial-gradient(circle 22px at center, #efefef 99%, transparent 0), linear-gradient(white 80px, transparent 0);
  background-size: 200px calc(80px), 120px 12px, calc(30% - calc(1.25rem + 44px + 31px)) 12px, calc(75% - calc(1.25rem + 44px + 31px)) 12px, 80px 12px, 44px 44px, 100% 100%;
  background-position: -150% 0, left 75px top 0, left calc(120px + 95px) top 0, left 75px top 16px, left 75px top 44px, 1.25rem 0, 0 0;
  background-repeat: no-repeat;
  -webkit-animation: loading-comment-3 4s infinite;
          animation: loading-comment-3 4s infinite;
}

@-webkit-keyframes loading-comment-3 {
  to {
    background-position: 350% 0, left 75px top 0, left calc(120px + 95px) top 0, left 75px top 16px, left 75px top 44px, 1.25rem 0, 0 0;
  }
}

@keyframes loading-comment-3 {
  to {
    background-position: 350% 0, left 75px top 0, left calc(120px + 95px) top 0, left 75px top 16px, left 75px top 44px, 1.25rem 0, 0 0;
  }
}

/* Comment block with 'see more' bottom aligned in the center */
.comment-more-skeleton {
  height: 55px;
}

.comment-more-skeleton:empty::after {
  clear: both;
  content: "";
  display: block;
  height: 100%;
  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0) 100%), linear-gradient(#efefef 24px, transparent 0), linear-gradient(white 55px, transparent 0);
  background-size: 200px calc(55px), 80px 24px, 100% 100%;
  background-position: -150% 0, left 50% top 16px, 0 0;
  background-repeat: no-repeat;
  -webkit-animation: loading-comment-more 4s infinite;
          animation: loading-comment-more 4s infinite;
}

@-webkit-keyframes loading-comment-more {
  to {
    background-position: 350% 0, left 50% top 16px, 0 0;
  }
}

@keyframes loading-comment-more {
  to {
    background-position: 350% 0, left 50% top 16px, 0 0;
  }
}