[data-component-id="skywin:landing_page_header"] {
  /* @todo Add your styles here. */

  --lph-ratio: 16/9;
  --lph-max-h: 85vh;


  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  position: relative;
  aspect-ratio: var(--lph-ratio);
  max-height: var(--lph-max-h);
  width: 100%;
  overflow: hidden;


  :is(.media, .content){
    grid-area: 1 / 1 / 2 / 2;
  }

  .layout-builder__section & {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;

    & :is(.media, .content){
      grid-area: auto;
    }
  }

  > .media{
    z-index: -1;

    aspect-ratio: var(--lph-ratio);
    max-height: var(--lph-max-h);
    width: 100%;


    &::after{
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(to bottom, #00537ebd 0%, #00537e57 30%, #00537e00 100%);
      z-index: 1;
    }

    .oembed-fullscreen-container, .oembed-fullscreen-video{
      width: 100%;
      height: 100%;
    }
    :is(.block, .field, .field-item, .field-items){ display: contents;}
    :is(img,picture,object,embed,iframe){
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
    }
  }
  .content{

    display: grid;
    width: min(100% - 4rem, 1300px);
    margin-inline: auto;
    justify-content: start;
    align-content: end;
    padding-block: clamp(2.5rem, 2rem + 4vw, 5rem);

    .block{
      max-width: 800px;
    }

    h1{

      /* 2.5rem(40px) @ 48rem(768px) increasing to 5rem(80px) @ 75rem(1200px) */
        font-size: clamp(2.5rem, calc(2.5rem + ((1vw - 0.48rem) * 9.2593)), 5rem);
        /* Where: 9.2593 = 100 * font-size_difference / viewport_width_difference */
      /*font-size: clamp(2.5rem, 2rem + 4vw, 5rem);*/
      padding: 0.5rem 2rem;
      line-height: 1.7;
      text-wrap: balance;
      display: inline;
      font-weight: 200;
      color: #fff;
      background: var(--color-light-blue, #ccc);
      box-decoration-break: clone;

    }

  }

}