/* =========================
   HERO WRAPPER
========================= */

.vb-hero-wrap {
  padding: 40px 0;
}

/* =========================
   GRID LAYOUT
========================= */

.vb-hero-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 24px;
  align-items: stretch;
}

/* =========================
   LEFT HERO
========================= */

.vb-hero-main {
  height: 100%;
}

.vb-hero-slide {
  height: 100%;
}

.vb-hero-slide-inner {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: center;
  gap: 20px;

  background: #f5f5f5;
  border-radius: 20px;
  padding: 40px;
  height: 100%;
}

/* TEXT */

.vb-hero-copy {
  max-width: 520px;
}

.vb-hero-title {
  font-size: 42px;
  line-height: 1.2;
  margin-bottom: 16px;
}

.vb-hero-desc {
  font-size: 16px;
  color: #555;
  margin-bottom: 24px;
}

/* IMAGE */

.vb-hero-media img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* =========================
   RIGHT SIDE
========================= */

.vb-hero-side {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 24px;
}

/* CARD */

.vb-hero-side-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;

  border-radius: 20px;
  padding: 24px;
  overflow: hidden;
}

/* VARIANTS */

.vb-hero-side-card--soft {
  background: #f2f2f2;
}

.vb-hero-side-card--cool {
  background: #eef6f1;
}

/* TEXT */

.vb-hero-side-title {
  font-size: 20px;
  line-height: 1.3;
  margin-bottom: 10px;
}

/* IMAGE */

.vb-hero-side-media img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* =========================
   RESPONSIVE
========================= */

@media (max-width: 1024px) {
  .vb-hero-grid {
    grid-template-columns: 1fr;
  }

  .vb-hero-side {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: unset;
  }
}

@media (max-width: 767px) {
  .vb-hero-slide-inner {
    grid-template-columns: 1fr;
  }

  .vb-hero-side {
    grid-template-columns: 1fr;
  }
}