.b-hero {
  --sky-top: #e5f8ff;
  --sky-edge: #92d0ef;
  background: var(--sky-edge);
}

.b-sky {
  position: relative;
  isolation: isolate;
  background: linear-gradient(to bottom, var(--sky-top), #c6edff 45%, var(--sky-edge));
}

.b-hero-heading {
  position: relative;
  z-index: 1;
  padding-top: 96px;
  padding-bottom: 48px;
}

.b-sky-motifs {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.b-sky-motifs > img {
  position: absolute;
  height: auto;
  object-fit: contain;
  opacity: 1;
  -webkit-mask-image: none;
  mask-image: none;
}

.sky-cloud-main { top: 18px; right: 9%; width: 190px; }
.sky-cloud-small { top: 26px; left: 45%; width: 120px; }
.sky-gulls { top: 118px; left: 57%; width: 94px; }

.b-town { background: var(--sky-edge); }
.b-town > img {
  -webkit-mask-image: linear-gradient(to bottom, transparent, rgba(0, 0, 0, .7) 18px, #000 44px);
  mask-image: linear-gradient(to bottom, transparent, rgba(0, 0, 0, .7) 18px, #000 44px);
}

@media (max-width: 1100px) {
  .b-town > img {
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 8px);
    mask-image: linear-gradient(to bottom, transparent, #000 8px);
  }
  .sky-cloud-main { width: 160px; right: 8%; }
  .sky-cloud-small { width: 110px; left: 42%; }
  .sky-gulls { width: 76px; }
}

@media (max-width: 767px) {
  .b-hero-heading { padding-top: 108px; padding-bottom: 34px; }
  .sky-cloud-main { width: 128px; top: 18px; right: 8%; }
  .sky-cloud-small { width: 88px; top: 14px; left: 7%; }
  .sky-gulls { width: 68px; top: 72px; left: auto; right: 24%; }
  .b-town > img {
    -webkit-mask-image: linear-gradient(to bottom, transparent, rgba(0, 0, 0, .8) 14px, #000 32px);
    mask-image: linear-gradient(to bottom, transparent, rgba(0, 0, 0, .8) 14px, #000 32px);
  }
}