.blog-import-hero,
.page-hero {
  background-image:
    linear-gradient(90deg, rgba(10, 15, 46, 0.96) 0%, rgba(10, 15, 46, 0.86) 42%, rgba(10, 15, 46, 0.62) 100%),
    url("/assets/images/vlms-blog-compliance-hero.png") !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  position: relative;
  overflow: hidden;
}

.blog-import-hero::before,
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 18% 28%, rgba(0, 212, 255, 0.2), transparent 28%),
    linear-gradient(180deg, transparent, rgba(10, 15, 46, 0.2));
  pointer-events: none;
}

.blog-import-hero .container,
.page-hero .container {
  position: relative;
  z-index: 1;
}

.blog-import-card {
  overflow: hidden;
}

.blog-import-card::before {
  content: "";
  display: block;
  height: 118px;
  margin: -1.15rem -1.15rem 1rem;
  background:
    linear-gradient(90deg, rgba(10, 15, 46, 0.18), rgba(0, 212, 255, 0.12)),
    url("/assets/images/vlms-blog-compliance-hero.png");
  background-size: cover;
  background-position: center;
}

.featured-graphic,
.blog-card-graphic {
  background-image:
    linear-gradient(135deg, rgba(10, 15, 46, 0.46), rgba(0, 212, 255, 0.16)),
    url("/assets/images/vlms-blog-compliance-hero.png") !important;
  background-size: cover !important;
  background-position: center !important;
}

@media (max-width: 768px) {
  .blog-import-card::before {
    height: 92px;
  }
}