.block-related-articles {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.block-related-articles__heading {
  margin-block-end: 8px;
  font-weight: 700;
  color: rgb(var(--color-text, 0 0 0));
}

.block-related-articles__heading.custom,
.related-article-card__title.custom,
.related-article-card__excerpt.custom {
  font-size: var(--custom-font-size);
}

.related-articles__list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Card Common */
.related-article-card {
  background-color: var(--card-bg-color, #ffffff);
  border-radius: var(--card-border-radius, 16px);
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.05);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.related-article-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.related-article-card__link {
  display: flex;
  text-decoration: none;
  color: inherit;
  width: 100%;
}

/* Featured Card (Top item) */
.related-article-card--featured .related-article-card__link {
  flex-direction: column;
}

.related-article-card--featured .related-article-card__cover {
  width: 100%;
  aspect-ratio: var(--featured-image-ratio, 16/9);
  overflow: hidden;
  position: relative;
  background-color: #f0f0f0;
}

.related-article-card--featured .related-article-card__cover img,
.related-article-card--featured .related-article-card__cover svg,
.related-article-card--featured .related-article-card__cover .theme-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.related-article-card--featured .related-article-card__content {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.related-article-card--featured .related-article-card__title {
  font-weight: 700;
  line-height: 1.35;
  color: #111111;
  margin: 0;
}

.related-article-card--featured .related-article-card__excerpt {
  color: #666666;
  line-height: 1.5;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Compact Card (Subsequent items) */
.related-article-card--compact .related-article-card__link {
  flex-direction: row;
  align-items: center;
  padding: 20px;
  gap: 16px;
}

.related-article-card--compact .related-article-card__cover {
  width: 96px;
  height: 64px;
  flex-shrink: 0;
  border-radius: calc(var(--card-border-radius, 16px) - 6px);
  overflow: hidden;
  position: relative;
  background-color: #f0f0f0;
}

.related-article-card--compact .related-article-card__cover img,
.related-article-card--compact .related-article-card__cover svg,
.related-article-card--compact .related-article-card__cover .theme-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.related-article-card--compact .related-article-card__content {
  flex: 1;
  min-width: 0;
}

.related-article-card--compact .related-article-card__title {
  font-weight: 700;
  line-height: 1.35;
  color: #111111;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* USWING COMPLETE RELATED VIDEO POSTERS V1 START */
.related-article-card__cover:has(img[src*="c9e3c85cf0e9bf580b3546c9657ac09f"], img[srcset*="c9e3c85cf0e9bf580b3546c9657ac09f"]) {
  --uswing-related-poster-image: url("https://img.myshopline.com/image/store/1784543328561/c9e3c85cf0e9bf580b3546c9657ac09f.jpg?w=2100&h=500");
}

.related-article-card__cover:has(img[src*="500b5d67183784fb98e94ce10a8d1354"], img[srcset*="500b5d67183784fb98e94ce10a8d1354"]) {
  --uswing-related-poster-image: url("https://img.myshopline.com/image/store/1784543328561/500b5d67183784fb98e94ce10a8d1354.jpg?w=2100&h=500");
}

.related-article-card__cover:has(img[src*="c9e3c85cf0e9bf580b3546c9657ac09f"], img[srcset*="c9e3c85cf0e9bf580b3546c9657ac09f"]),
.related-article-card__cover:has(img[src*="500b5d67183784fb98e94ce10a8d1354"], img[srcset*="500b5d67183784fb98e94ce10a8d1354"]) {
  isolation: isolate;
  background: #11161d;
}

.related-article-card__cover:has(img[src*="c9e3c85cf0e9bf580b3546c9657ac09f"], img[srcset*="c9e3c85cf0e9bf580b3546c9657ac09f"])::before,
.related-article-card__cover:has(img[src*="500b5d67183784fb98e94ce10a8d1354"], img[srcset*="500b5d67183784fb98e94ce10a8d1354"])::before {
  position: absolute;
  z-index: 0;
  inset: -10%;
  content: "";
  background-image: var(--uswing-related-poster-image);
  background-position: 50% 50%;
  background-size: 100% 100%;
  filter: blur(clamp(8px, 1vw, 15px)) brightness(0.84) saturate(1.02) contrast(0.96);
  opacity: 1;
  transform: scale(1.04);
}

.related-article-card--featured .related-article-card__cover:has(img[src*="c9e3c85cf0e9bf580b3546c9657ac09f"], img[srcset*="c9e3c85cf0e9bf580b3546c9657ac09f"])::after,
.related-article-card--featured .related-article-card__cover:has(img[src*="500b5d67183784fb98e94ce10a8d1354"], img[srcset*="500b5d67183784fb98e94ce10a8d1354"])::after {
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
  content: "";
  background: rgb(255 255 255 / 1%);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  -webkit-mask-image: linear-gradient(to bottom, transparent 24%, rgb(0 0 0 / 50%) 28%, rgb(0 0 0 / 50%) 31%, transparent 35%, transparent 65%, rgb(0 0 0 / 50%) 69%, rgb(0 0 0 / 50%) 72%, transparent 76%);
  mask-image: linear-gradient(to bottom, transparent 24%, rgb(0 0 0 / 50%) 28%, rgb(0 0 0 / 50%) 31%, transparent 35%, transparent 65%, rgb(0 0 0 / 50%) 69%, rgb(0 0 0 / 50%) 72%, transparent 76%);
}

.related-article-card__cover img[src*="c9e3c85cf0e9bf580b3546c9657ac09f"],
.related-article-card__cover img[srcset*="c9e3c85cf0e9bf580b3546c9657ac09f"],
.related-article-card__cover img[src*="500b5d67183784fb98e94ce10a8d1354"],
.related-article-card__cover img[srcset*="500b5d67183784fb98e94ce10a8d1354"] {
  position: relative;
  z-index: 1;
  object-fit: contain !important;
  object-position: 50% 50% !important;
  background: transparent;
}

.related-article-card--compact .related-article-card__title {
  display: block;
  overflow: visible;
  overflow-wrap: break-word;
  -webkit-box-orient: initial;
  -webkit-line-clamp: unset;
  line-clamp: unset;
}
/* USWING COMPLETE RELATED VIDEO POSTERS V1 END */