/* 公開ページ: 「画像の下」は画像へ一切重ねず、画像の下側に独立表示する */
.hero-visual.has-hero-card-below {
  margin-bottom: 210px;
}

.hero-visual.has-hero-card-below .hero-card--below-image {
  position: absolute;
  top: calc(100% - 52px);
  right: 0;
  bottom: auto;
  left: 0;
  max-width: none;
  transform: none;
}

/* 管理画面プレビューでも同じ見え方にする */
.hero-settings-preview.has-card-below {
  display: grid;
  gap: 12px;
}

.hero-settings-preview.has-card-below .hero-card--below-image {
  position: static;
  inset: auto;
  max-width: none;
  margin: 0;
  transform: none;
}

@media (max-width: 760px) {
  .hero-visual.has-hero-card-below {
    margin-bottom: 260px;
  }
}