.reference-hero {
    background-image:
        linear-gradient(90deg, rgba(6, 20, 16, .98), rgba(6, 20, 16, .82) 38%, rgba(6, 20, 16, .15)),
        url('/assets/hero-masjid.webp');
    background-position: center 47%;
    background-size: cover;
    background-repeat: no-repeat;
}

html[data-theme="light"] body .reference-hero p,
html[data-theme="light"] body .reference-hero .hero-price > span,
html[data-theme="light"] body .reference-hero .hero-price small {
    color: #f7faf8 !important;
    font-weight: 700;
}

@media (max-width: 580px) {
    .reference-hero { background-position: 55% center; }
}