/*
A simple little SCSS mixin for creating scrim gradients
Inspired by Andreas Larson - https://github.com/larsenwork
https://css-tricks.com/easing-linear-gradients/
*/
/* HIGHTLIGHT GRID STYLE - reusable - for FacetWp */
/* ------------------------------------ *\
  #RELATED-ARTICLES
\* ------------------------------------ */
/* Block for related articles in single article sidebar */
.opd-related-articles__article {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
  --card-line-spacing-base: 1.5625rem;
  --card-line-height: 2px;
  --card-line-bg: #752E4A;
  padding-left: var(--card-line-spacing-base);
}
.opd-related-articles__article a {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
.opd-related-articles__article::before {
  content: "";
  display: inline-block;
  width: calc(0.5 * var(--card-line-spacing-base)); /* half card padding */
  height: var(--card-line-height);
  margin-right: calc(0.5 * var(--card-line-spacing-base)); /* half card padding */
  margin-left: calc(-1 * var(--card-line-spacing-base)); /* card padding */
  background-color: var(--card-line-bg, currentColor);
}
.opd-related-articles__article-title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-flow: column nowrap;
          flex-flow: column nowrap;
}
.opd-related-articles__article-category {
  font-family: "Lora", serif;
  font-size: clamp(0.875rem, 1rem + 1.5vw, 1rem);
  font-weight: 600;
  color: #752E4A;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}