kspace-wordpress-theme/scss/components/_previews.scss

/*
 * 4. Previews
 * Special style for previews cards
 *
*/
$preview-height: 8*$lineheight;

.previews-section {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  grid-gap: $lineheight;
  padding-bottom: $lineheight;

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

  @include xxl() {
    grid-template-columns: 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;
}

.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:rgba(0,0,0,0.4);
	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: $lineheight_half;
    backdrop-filter: none;
    transition: background-color 0.3s;

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

    .card-header {
      font-family: $basefont;
      font-size: 1rem;
      background-color: $color-primary;
      @include card-header($lineheight_half);
      font-weight: $fontweight_big;
    }
  }

  &: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:135px;
      }
    }
  }
}

.preview-content {
  max-height: $preview-height;
  overflow:hidden;
  background-size: cover;
  min-height:100%;
  min-width:100%;

  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-light;
  height:165px;
  overflow: hidden;

  .metadata-pills {
    height:165px;
  	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.card-info {
  .comment-text {
    @include angled-edge('outside top', 'upper left', $color-skyblue, 16);
    background-color:$color-skyblue;
  }
}

.card-preview.card-grey {
  .comment-text {
    @include angled-edge('outside top', 'upper left', $color-grey, 16);
    background-color:$color-grey;
  }
}

.comment-text {
  @include angled-edge('outside top', 'upper left', $color-violet, 16);
  color: $color-light;
  background-color:$color-violet;
  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: 4.5rem;
    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;
}

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