.stg-contentgrid{
  --stg-columns-desktop:2;
  --stg-columns-tablet:2;
  --stg-columns-mobile:1;
  --stg-image-size:96px;
  --stg-text-color:inherit;
  --stg-title-color:inherit;
  --stg-accent-color:inherit;
  --stg-card-color:transparent;
  --stg-line:rgba(76,43,70,.18);

  display:grid;
  grid-template-columns:repeat(var(--stg-columns-desktop),minmax(0,1fr));
  gap:0 32px;

  font-family:inherit;
  color:var(--stg-text-color);
}

.stg-contentgrid__item{
  min-width:0;
  color:inherit;
}

.stg-contentgrid--editorial .stg-contentgrid__item,
.stg-contentgrid--compact .stg-contentgrid__item{
  display:grid;
  grid-template-columns:var(--stg-image-size) minmax(0,1fr);
  gap:14px;
  padding:14px 0;
  border-bottom:1px solid var(--stg-line);
}

.stg-contentgrid--compact .stg-contentgrid__item{
  gap:10px;
  padding:10px 0;
}

.stg-contentgrid--cards{
  row-gap:24px;
}

.stg-contentgrid--cards .stg-contentgrid__item{
  overflow:hidden;
  border:1px solid var(--stg-line);
}

.stg-contentgrid--custom-card{
  background:var(--stg-card-color);
}

.stg-contentgrid__image{
  display:block;
  width:var(--stg-image-size);
  height:var(--stg-image-size);
  overflow:hidden;
  background:rgba(76,43,70,.06);
}

.stg-contentgrid--cards .stg-contentgrid__image{
  width:100%;
  height:auto;
  aspect-ratio:1/1;
}

.stg-contentgrid__image img,
.stg-contentgrid__placeholder{
  display:block;
  width:100%;
  height:100%;
}

.stg-contentgrid__image img{
  object-fit:cover;
}

.stg-contentgrid__placeholder{
  background:linear-gradient(
    135deg,
    rgba(76,43,70,.10),
    rgba(233,119,0,.10)
  );
}

.stg-contentgrid--cards .stg-contentgrid__body{
  padding:16px;
}

.stg-contentgrid__category{
  margin:0 0 5px;
  color:var(--stg-accent-color);
  font-size:.76rem;
  font-weight:600;
  line-height:1.2;
}

.stg-contentgrid__title{
  margin:0 0 6px;
  line-height:1.3;
  font-weight:600;
}

.stg-contentgrid--title-small .stg-contentgrid__title{
  font-size:.9rem;
}

.stg-contentgrid--title-normal .stg-contentgrid__title{
  font-size:1rem;
}

.stg-contentgrid--title-large .stg-contentgrid__title{
  font-size:1.18rem;
}

.stg-contentgrid__title a{
  color:var(--stg-title-color);
  text-decoration:none;
}

.stg-contentgrid__title a:hover,
.stg-contentgrid__title a:focus{
  color:var(--stg-accent-color);
}

.stg-contentgrid__intro{
  margin:0;
  color:var(--stg-text-color);
  line-height:1.45;
}

.stg-contentgrid--body-small .stg-contentgrid__intro{
  font-size:.78rem;
}

.stg-contentgrid--body-normal .stg-contentgrid__intro{
  font-size:.86rem;
}

.stg-contentgrid--body-large .stg-contentgrid__intro{
  font-size:.96rem;
}

@media(max-width:959px){
  .stg-contentgrid{
    grid-template-columns:repeat(
      var(--stg-columns-tablet),
      minmax(0,1fr)
    );
    gap:0 22px;
  }
}

@media(max-width:639px){
  .stg-contentgrid{
    grid-template-columns:repeat(
      var(--stg-columns-mobile),
      minmax(0,1fr)
    );
    gap:0 14px;
  }

  .stg-contentgrid--editorial .stg-contentgrid__item,
  .stg-contentgrid--compact .stg-contentgrid__item{
    grid-template-columns:min(78px,var(--stg-image-size)) minmax(0,1fr);
    gap:11px;
  }
}


/* ===== Card system 1.0.5 ===== */

.stg-contentgrid--cards .stg-contentgrid__item{
  position:relative;
  transition:
    transform .22s ease,
    box-shadow .22s ease,
    border-color .22s ease;
}

/* presets */
.stg-contentgrid--preset-flat.stg-contentgrid--cards .stg-contentgrid__item{
  box-shadow:none;
  border:1px solid rgba(76,43,70,.10);
}

.stg-contentgrid--preset-soft.stg-contentgrid--cards .stg-contentgrid__item{
  border:1px solid rgba(76,43,70,.08);
  box-shadow:0 6px 18px rgba(28,18,25,.08);
}

.stg-contentgrid--preset-elevated.stg-contentgrid--cards .stg-contentgrid__item{
  border:0;
  box-shadow:0 12px 34px rgba(28,18,25,.14);
}

.stg-contentgrid--preset-editorial.stg-contentgrid--cards .stg-contentgrid__item{
  border:0;
  border-top:3px solid var(--stg-accent-color);
  box-shadow:0 7px 24px rgba(28,18,25,.09);
}

/* radius */
.stg-contentgrid--radius-none .stg-contentgrid__item,
.stg-contentgrid--radius-none .stg-contentgrid__image{
  border-radius:0;
}

.stg-contentgrid--radius-small .stg-contentgrid__item{
  border-radius:4px;
}

.stg-contentgrid--radius-medium .stg-contentgrid__item{
  border-radius:10px;
}

.stg-contentgrid--radius-large .stg-contentgrid__item{
  border-radius:16px;
}

.stg-contentgrid--cards .stg-contentgrid__item{
  overflow:hidden;
}

/* ratios */
.stg-contentgrid--cards .stg-contentgrid__image{
  width:100%;
  height:auto;
}

.stg-contentgrid--ratio-1x1.stg-contentgrid--cards .stg-contentgrid__image{
  aspect-ratio:1/1;
}

.stg-contentgrid--ratio-4x3.stg-contentgrid--cards .stg-contentgrid__image{
  aspect-ratio:4/3;
}

.stg-contentgrid--ratio-16x9.stg-contentgrid--cards .stg-contentgrid__image{
  aspect-ratio:16/9;
}

.stg-contentgrid--ratio-3x2.stg-contentgrid--cards .stg-contentgrid__image{
  aspect-ratio:3/2;
}

.stg-contentgrid--cards .stg-contentgrid__image img{
  transition:transform .35s ease;
}

/* hover effects */
.stg-contentgrid--hover-lift.stg-contentgrid--cards .stg-contentgrid__item:hover,
.stg-contentgrid--hover-both.stg-contentgrid--cards .stg-contentgrid__item:hover{
  transform:translateY(-5px);
  box-shadow:0 16px 38px rgba(28,18,25,.16);
}

.stg-contentgrid--hover-zoom.stg-contentgrid--cards .stg-contentgrid__item:hover img,
.stg-contentgrid--hover-both.stg-contentgrid--cards .stg-contentgrid__item:hover img{
  transform:scale(1.045);
}

/* content spacing */
.stg-contentgrid--cards .stg-contentgrid__body{
  padding:18px 18px 20px;
}

.stg-contentgrid--cards .stg-contentgrid__title{
  margin-bottom:8px;
}

.stg-contentgrid--cards .stg-contentgrid__intro{
  opacity:.88;
}

/* make UIkit/YOOtheme card backgrounds blend correctly */
.stg-contentgrid--cards .uk-card-primary .stg-contentgrid__title a,
.stg-contentgrid--cards .uk-card-secondary .stg-contentgrid__title a{
  color:inherit;
}

.stg-contentgrid--cards .uk-card-primary .stg-contentgrid__intro,
.stg-contentgrid--cards .uk-card-secondary .stg-contentgrid__intro{
  color:inherit;
  opacity:.84;
}

/* Editorial mode refinement */
.stg-contentgrid--editorial .stg-contentgrid__item{
  transition:background-color .18s ease;
}

.stg-contentgrid--editorial .stg-contentgrid__item:hover{
  background:rgba(76,43,70,.025);
}

/* mobile refinement */
@media(max-width:639px){
  .stg-contentgrid--cards{
    row-gap:16px;
  }

  .stg-contentgrid--cards .stg-contentgrid__body{
    padding:15px;
  }

  .stg-contentgrid--hover-lift.stg-contentgrid--cards .stg-contentgrid__item:hover,
  .stg-contentgrid--hover-both.stg-contentgrid--cards .stg-contentgrid__item:hover{
    transform:none;
  }
}

/* Empty state 1.0.7 */
.stg-contentgrid-empty{
  margin:0;
  padding:14px 16px;
  border:1px solid rgba(76,43,70,.12);
  border-radius:8px;
  background:rgba(76,43,70,.035);
  color:inherit;
  font-size:.9rem;
  line-height:1.45;
}

.stg-contentgrid-empty--plain{
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
}

.stg-contentgrid-empty--muted{
  border-color:transparent;
}
