.hero {
  padding-top: 40px; }
  body.page-node-type-event .hero {
    margin-bottom: 0; }
  .hero h1 {
    max-width: 14em;
    position: relative;
    z-index: 2; }
    .hero h1 span {
      color: #58c5c7; }
    @media only screen and (min-width: 600px) {
      .hero h1 span {
        display: block; } }
    @media only screen and (min-width: 0) and (max-width: calc(600px - 1px)) {
      .page-node-type-article .hero h1,
      .page-node-type-itinerary .hero h1,
      .page-node-type-list-page .hero h1 {
        margin-bottom: 0; } }
    @media only screen and (min-width: 0) and (max-width: calc(768px - 1px)) {
      .hero h1 {
        margin: 0 0 55px; } }
    @media only screen and (min-width: 768px) {
      .hero h1 {
        margin: 0 0 120px; } }
  .hero p.subtitle {
    font-family: "AcherusBold";
    margin-top: 0;
    position: relative;
    z-index: 1; }
  .hero .hero-media {
    z-index: 1;
    position: relative; }
    @media only screen and (min-width: 0) and (max-width: calc(600px - 1px)) {
      .page-node-type-article .hero .hero-media,
      .page-node-type-itinerary .hero .hero-media,
      .page-node-type-list-page .hero .hero-media {
        margin-top: 30px; } }
    .hero .hero-media .gallery {
      margin-left: 0;
      margin-right: 0;
      max-width: none; }
      .hero .hero-media .gallery .content-slider[data-slider-type='gallery'] {
        overflow: visible; }
    .hero .hero-media--video video,
    .hero .hero-media--video .poster {
      bottom: 0;
      left: 0;
      position: absolute;
      right: 0;
      top: 0;
      transition: opacity 0.5s ease 0.5s; }
    .hero .hero-media--video video {
      opacity: 0;
      transition-delay: 0.375s;
      z-index: 2; }
      .hero .hero-media--video video.is-loaded {
        opacity: 1; }
        .hero .hero-media--video video.is-loaded + .poster .hero .hero-media--video video.is-loaded + .media-image {
          opacity: 0; }
    .hero .hero-media--video .poster {
      background-position: center center;
      background-repeat: no-repeat;
      background-size: cover; }
  .hero--video {
    height: calc(100vh - 40px);
    overflow: hidden;
    position: relative; }
    .touchevents .hero--video {
      height: calc(100vh - 100px); }
    .hero--video .hero-media,
    .hero--video .media,
    .hero--video .media-container,
    .hero--video img,
    .hero--video video {
      height: 100%;
      left: 0;
      position: absolute;
      top: 0;
      width: 100%; }
    .hero--video img,
    .hero--video video {
      -o-object-fit: cover;
         object-fit: cover; }
    .hero--video .content {
      left: 0;
      position: absolute;
      top: 0; }
      .hero--video .content > * {
        color: #ffffff; }
      .hero--video .content h1 {
        max-width: 8em; }
    @media only screen and (min-width: 0) and (max-width: calc(1024px - 1px)) {
      .hero--video {
        margin-top: -78px;
        padding: 0; }
        .hero--video .content h1 {
          margin-top: 120px; } }
    @media only screen and (min-width: 1024px) {
      .hero--video {
        margin-top: -120px;
        padding: 0; }
        .hero--video .content h1 {
          margin-top: calc(120px + 80px); } }
    @media only screen and (max-height: 750px) and (min-width: 1024px) {
      .hero--video .content h1 {
        font-size: 8rem;
        line-height: 8rem;
        max-width: 80%; } }
    .is-edge .hero--video video {
      height: 100%;
      width: auto; }
    @media (min-aspect-ratio: 16 / 9) {
      .is-edge .hero--video video {
        height: auto;
        width: 100%; } }
  .neighbourhood-mode .hero .crown-container {
    display: none; }
  @media only screen and (min-width: 0) and (max-width: calc(768px - 1px)) {
    .neighbourhood-mode .hero {
      display: grid;
      padding-top: 0;
      grid-template-areas: 'media' 'title'; }
      .neighbourhood-mode .hero > .layout-wrapper {
        padding-top: 28px;
        grid-area: title; }
        .neighbourhood-mode .hero > .layout-wrapper h1 {
          margin: 0; }
      .neighbourhood-mode .hero .hero-media {
        grid-area: media; } }
  @media only screen and (min-width: 768px) {
    .neighbourhood-mode .hero > .layout-wrapper {
      padding-top: 28px; } }
  .hero .date {
    font-size: 1.4rem;
    line-height: 1.8rem;
    margin-bottom: 20px; }
  @media only screen and (min-width: 0) and (max-width: calc(600px - 1px)) {
    .hero .read-time {
      display: none; }
    .hero p.subtitle {
      font-size: 1.2rem;
      line-height: 1.6rem;
      font-family: "AcherusBold";
      margin-top: -2px; } }
  @media only screen and (min-width: 600px) and (max-width: calc(768px - 1px)) {
    .hero p.subtitle {
      font-size: 1.4rem;
      line-height: 2rem;
      margin-top: -6px; } }
  @media only screen and (min-width: 0) and (max-width: calc(768px - 1px)) {
    .hero {
      margin-bottom: 28px; }
      .hero p.subtitle {
        margin: 0; } }
  @media only screen and (min-width: 768px) {
    .hero {
      margin-bottom: 55px; }
      .hero p.subtitle {
        transform: translateY(-6px); } }
  @media only screen and (min-width: 768px) and (max-width: calc(1024px - 1px)) {
    .hero p.subtitle {
      margin-top: -28px; } }
  @media only screen and (min-width: 1024px) {
    .hero {
      margin-bottom: 82px; }
      .hero p.subtitle {
        margin-top: -28px; } }
  .hero-author-container {
    display: grid;
    grid-template-rows: 58% auto; }
    .hero-author-container.no-author {
      grid-template-columns: unset; }
    @media only screen and (min-width: 0) and (max-width: calc(600px - 1px)) {
      .hero-author-container {
        gap: 0 10px;
        grid-template-columns: 60px auto;
        margin-top: 30px;
        margin-bottom: 10px; } }
    @media only screen and (min-width: 600px) {
      .hero-author-container {
        gap: 0 20px;
        grid-template-columns: 72px auto; } }
    @media only screen and (min-width: 600px) and (max-width: calc(768px - 1px)) {
      .hero-author-container {
        margin-top: -20px;
        margin-bottom: 40px; } }
    @media only screen and (min-width: 768px) {
      .hero-author-container {
        margin-bottom: 60px;
        margin-top: -80px; } }
    .hero-author-container .media-image {
      grid-column: 1;
      grid-row: 1 / 3; }
      .hero-author-container .media-image .media-container {
        border-radius: 100%;
        height: 72px;
        overflow: hidden;
        margin: 0;
        padding: 0; }
        @media only screen and (min-width: 0) and (max-width: calc(600px - 1px)) {
          .hero-author-container .media-image .media-container {
            height: 60px; } }
        @media only screen and (min-width: 600px) {
          .hero-author-container .media-image .media-container {
            height: 72px; } }
        .hero-author-container .media-image .media-container img {
          height: 100%;
          -o-object-fit: cover;
             object-fit: cover;
          width: 100%; }
    .hero-author-container .author {
      align-self: end;
      font-family: "AcherusBold", sans-serif;
      font-size: 16px;
      grid-column: 2;
      grid-row: 1; }
    .hero-author-container .date {
      align-self: start;
      font-size: 12px; }

.hero .ai-summary .btn,
.event-intro .ai-summary .btn {
  box-sizing: border-box;
  width: 100%; }
  @media only screen and (min-width: 0) and (max-width: calc(768px - 1px)) {
    .hero .ai-summary .btn,
    .event-intro .ai-summary .btn {
      margin: 24px auto; } }
  @media only screen and (min-width: 768px) {
    .hero .ai-summary .btn,
    .event-intro .ai-summary .btn {
      position: absolute;
      right: 32px;
      bottom: 0;
      width: auto; } }
  @media only screen and (min-width: 1024px) {
    .hero .ai-summary .btn,
    .event-intro .ai-summary .btn {
      right: 64px; } }
  @media only screen and (min-width: 1200px) {
    .hero .ai-summary .btn,
    .event-intro .ai-summary .btn {
      right: 120px; } }

.hero .content-sponsored + .ai-summary,
.event-intro .content-sponsored + .ai-summary {
  margin-top: 4px; }
  .hero .content-sponsored + .ai-summary button,
  .event-intro .content-sponsored + .ai-summary button {
    margin-top: 0; }
  @media only screen and (min-width: 768px) {
    .hero .content-sponsored + .ai-summary,
    .event-intro .content-sponsored + .ai-summary {
      margin-top: 0; }
      .hero .content-sponsored + .ai-summary button,
      .event-intro .content-sponsored + .ai-summary button {
        margin-bottom: 20px; } }

@media only screen and (min-width: 768px) {
  .event-intro:has(.content-tag) .ai-summary .btn {
    bottom: 20px; }
  .event-intro .ai-summary .btn {
    right: 0;
    bottom: 55px; } }

.read-time {
  display: inline-block;
  margin-bottom: 32px;
  padding-top: 16px;
  position: relative;
  font-size: 0.875em; }
  @media only screen and (min-width: 0) and (max-width: calc(1024px - 1px)) {
    .read-time {
      margin-top: 32px; } }
  @media only screen and (min-width: 1024px) {
    .read-time {
      margin-top: 64px; } }
  .read-time:before {
    background: #58c5c7;
    content: '';
    display: block;
    height: 2px;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%; }

/*# sourceMappingURL=heros.css.map */