qdouze-bludit-theme/scss/components/_previews.scss

$preview-height: 8*$lineheight;
$preview-content-height:165px;
$comment-peek-height:0px;
$comment-height:30px;

.preview-grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  grid-gap: $lineheight;
  padding-bottom: $lineheight;
  
  @include md() {
    grid-template-columns: 1fr 1fr;
  }

  @include xl() {
    grid-template-columns: 1fr 1fr 1fr;
  }

  @include xxl() {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}

.preview-container {
  width:100%;
}

@media(max-width:767px){}
@media(min-width:768px){}
@media(min-width:992px){

  .prev-col-2 .preview-container {
    width:50%;
  }

  .prev-col-3 .preview-container {
    width:33%;
  }

  .prev-col-4 .preview-container {
    width:25%;
  }

}

.card-preview {
  padding:0;
  width:100%;
  margin:auto;
  box-shadow: $large-shadow, $inset-shadow;
}

.preview-link {
  padding:0;
  background-color: transparent;
  margin:0!important;
}

.preview-item {
  height: $preview-height;
  font-size:0.9rem;
	line-height: $lineheight !important;
  text-align:justify;
  background-color:rgba(0,0,0,0.00);
  color:dim(getFontColor());
	position: relative;

	display: flex;
  -ms-flex-align: center !important;
  align-items: center !important;
  justify-content: center;

  .preview-overlay {
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    position: absolute;
    padding-top: $card-header-vmargin/2;
    backdrop-filter: none;
    transition: background-color 0.3s;
    @include border-radius($card-radius);

    h1, h2, h3, h4, h5, h6 {
      color: $color-font-light;
      font-size: 1rem;
      line-height: $lineheight;
      font-weight:$fontweight_big;
    }

    .card-header {
      font-family: $basefont;
      font-size: 1rem;
      @include panel-header($lineheight_half);
      @include colorize-shape($color-primary);
      color:getTextColorFromBackground($color-primary);
      font-weight: $fontweight_big;
      margin-top:0px;
    }
  }

  &:hover {
    .preview-overlay {
      backdrop-filter: blur(2px);
      background-color:rgba(0,0,0,0.4);

      .metadata-pills {
        opacity: .9;
        transition: opacity .5s, height .5s;
        height:$preview-content-height - $comment-height;
      }
    }
  }
}

.preview-content {
  max-height: $preview-height;
  overflow:hidden;
  background-size: cover;
  min-height:100%;
  min-width:100%;
  @include border-radius($card-radius);
  font-size:0.85rem;
  line-height:1.25rem;

  h1, h2, h3, h4, h5, h6 {
    margin-bottom:0px;
    max-width:100%;
    display:none;
  }

  & > p {
    width:100%;
    margin:auto;

    & > img {
      max-width:100%;
      height:auto;
      vertical-align:middle;
      margin:auto;
      text-align:center;
    }

    &.p-img {
      text-align:center;
      margin:auto;
      padding:auto;
      display: block;
      width:100%;
    }
  }
}

.preview-metadata {
  color: $color-font-light;
  height:$preview-content-height;
  overflow: hidden;
  @include border-radius($card-radius);

  .metadata-pills {
    height:$preview-content-height - $comment-peek-height;
  	opacity: 0;
    transition: opacity .3s, height .3s;
    display:flex;
    justify-content:space-between;
    padding-left: $lineheight/2;
    padding-right: $lineheight/2;
    font-size:0.9em;
  }
}

.card-preview.head-info {
  .comment-text {
    background-color:$color-secondary;
  }
}

.card-preview.card-grey {
  .comment-text {
    background-color:$color-muted;
  }
}

.comment-text {
  color: $color-font-light;
  background-color:$color-primary;
  text-align: center;
}

.card-preview time {
  margin-bottom:0.4em;
  display:block;
}

// Author area

.author-area {
  display:flex;

  img.author-avatar, img.avatar {
    display:block;
    height: $lineheight*3;
    width:auto;
    border-radius:100%;
    padding:0;
    margin:0;
    margin-right:$lineheight;
  }

  .author-metadata {
    align-items:center;
    display:flex;
    flex-direction:column;
    justify-content: center;
    align-items: flex-start;
  }

  .author-date {
    font-style:italic;
  }

  &:not(:last-child) {
    margin-bottom:$lineheight;
  }
}

.pigimg {
  display:block;
  max-width: 100%;
  height:auto;
  margin:auto;
}

.avatar {
  background: transparent;
}

.mwarea {
  padding-bottom: $lineheight;
  .avatar {
    width:80%;
    height:auto;
    display:block;
    margin:auto;
  }
}

.cover {
  width:100%;
  height:auto;
  @include border-radius($card-radius);
}

.roman {
  @include md() {
      width:80%;
      position:relative;
      top:-240px;
      margin:auto;
  }
}