.shuffle-actions{
  @include media-breakpoint-down(sm) {
    display: none !important;
  }
}

.action-links-shuffle{
  @include media-breakpoint-up(md) {
    display: none !important;
  }
}
.shuffle-links{
  @include media-breakpoint-down(sm) {
    display: none !important;
  }
}
.overflow-area-container{
  .shuffleblock{
    margin-bottom: 0px;
  }
}
.shuffleblock {
  margin-top: $lg-space;
  border-top: 1px solid $grey-border;
  margin-bottom: $lg-space;

  .shuffle-intro{
    font-size: 18px; 
    line-height: 27px;
    @include media-breakpoint-down(sm) {
      display: none;
    }
  }
  .shuffle-date{
    font-size: 16px; 
    line-height: 24px;
    @include media-breakpoint-down(md) {
      display: none;
    }
  }

  .shuffle-date-mobile{
    @include media-breakpoint-up(md) {
      display: none;
    }
  }
  .vld-overlay{
    min-height: 120px;
  }


  .title-wrapper{
    padding-top: $xs-space;
    
    @include media-breakpoint-down(sm) {
      margin-bottom: 34px;
    }
  }
  .vld-overlay .vld-icon,
  .vld-parent {
    position: absolute !important;
    top: 80px !important;
  }

  .img-with-caption {
    height: 197px;
    width: 100%;
    overflow: hidden;
    margin-bottom: $xs-space;
    position: relative;
    @include media-breakpoint-down(sm) {
      margin-bottom: 0px;
      width: 105px;
      height: 95px;
      .caption{
        display: none;
      }
    }
    .img-caption {
      height: 100%;
      width: 100%;
      background-position: center;
      background-size: cover;
    }
    .caption {
        position: absolute;
        text-transform: inherit;
        bottom: 0;
        left: 0;
        margin-bottom: 0px;
        font-family: "Lato Bold";
        font-size: 16px;
        line-height: 24px;
    }
  }
  .shuffle-article{
    margin-bottom: $md-space;
    min-height: 350px;
    @include media-breakpoint-down(sm) {
      margin-bottom: $xs-space;
      min-height: inherit;
    }
  }
}

.article-shuffle{
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid transparent;
  margin-bottom: $md-space;
  padding: 15px;
  cursor: pointer;
  transition: box-shadow 0.3s ease;
  &:hover{
    @include media-breakpoint-up(md) {
      box-shadow: $box-shadow;
    }
    h2{
      text-decoration: underline;
    }
  }
  @include media-breakpoint-down(sm) {
    flex-direction: row;
    padding-top: $xs-space;
    padding-bottom: $xs-space;
    margin-bottom: 0px;
    border-bottom: 1px solid #e5e5e5;
  }
  .article-shuffle-caption-mobile{
    align-self: flex-start;
    margin-bottom: 10px;
    font-size: 14px;
    padding: 0px 10px;
    line-height: 21px;
    @include media-breakpoint-up(md) {
      display: none;
    }
  }
  .article-shuffle-img{
    @include media-breakpoint-up(md) {
      margin-right: 0px;
    }
    margin-right: $xs-space;
  }
  .article-shuffle-info{
    text-decoration-color: $dark-grey;
    &:hover{
      h2{
        color: $dark-grey;
        text-decoration-color: $dark-grey;
      }
    }
    @include media-breakpoint-down(sm) {
      display: flex;
      flex-direction: column;
    }
  }
}