.hero {
  position: relative;
  min-height: 390px;
  background: #202320 url("/meeting-room-stylized.png") center 43% / cover no-repeat;
  overflow: hidden;
}

.hero-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(17, 23, 17, .60) 0%, rgba(17, 23, 17, .10) 42%, rgba(17, 23, 17, .92) 100%),
    linear-gradient(90deg, rgba(17, 23, 17, .44), transparent 68%);
}

.hero-content {
  position: relative;
  z-index: 1;
  min-height: 340px;
  display: flex;
  flex-direction: column;
}

.hero small { color: #ecf0e9; text-shadow: 0 1px 8px #000; }
.hero h1 { margin: 34px 0 auto; text-shadow: 0 3px 16px rgba(0, 0, 0, .74); }
.hero p {
  margin: 0;
  background: rgba(23, 32, 23, .72);
  border-color: rgba(255, 255, 255, .24);
  backdrop-filter: blur(12px);
}