export function BannerHero() {
  return (
      <div className="relative w-full h-16 sm:h-24 md:h-32 lg:h-42 xl:h-56 overflow-hidden bg-gray-900">
        <img
            src="/images/panorama-hero-2.webp"
            alt="Культура Двух Столиц"
            className="absolute inset-0 w-full h-full object-cover"
        />

        <div className="absolute inset-0 bg-gradient-to-r from-black/70 via-black/60 to-black/50" />

        <div className="relative h-full flex items-center justify-center px-4 sm:px-6 lg:px-8">
          <div className="text-center">
            <h1 className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-bold text-white uppercase tracking-tight">
              Культура Двух Столиц
            </h1>
          </div>
        </div>
      </div>
  );
}
