.hero--home::before {
  background-image: url('/assets/images/hero-mobile-event.webp');
}

.hero--home {
  min-height: 90vh;
}

.home-media-block__media {
  max-height: 420px;
}

.home-media-block__media img {
  object-position: center;
}

.home-event-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.home-event-block__media {
  max-height: 260px;
}

.home-event-block__title {
  margin-bottom: var(--space-3);
}

.home-gallery__title {
  margin-bottom: var(--space-3);
}

.home-contact-form {
  background-color: var(--color-bg-soft);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-border-strong);
}

.home-contact-form .btn--full {
  margin-top: var(--space-2);
}

.faq-item__question span {
  font-size: var(--font-size-xl);
}

.faq-item__question {
  background: transparent;
}

@media (max-width: 960px) {
  .home-contact-form {
    padding: var(--space-4);
  }
}

@media (max-width: 640px) {
  .home-event-block__media {
    max-height: 220px;
  }
}
<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=AW-18313069836"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'AW-18313069836');
</script>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>