article.landing-page {
  padding-bottom: 2rem;

  .landing-logo {
    position: relative;
    z-index: 2;
    top: 40%;
    padding: 2rem;

    @media (width >= 600px) {
      padding: 0;
    }

    img {
      width: 100%;

      @media (width >= 600px) {
        width: 45%;
        margin: 0 auto;
      }
    }
  }

  .video-background-wrapper {
    position: relative;
    overflow: hidden;
    height: 80vh;
    text-align: center;
    margin-bottom:  2rem;
  }

  .overlay {
    z-index: 2;
    width: 100%;
    height: 100%;
    background-color: rgb(2 9 51 / 35%);
    position: absolute;
    inset: 0;
  }

  .video-fallback {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center center;
    z-index: 0;
  }

  .video-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 1;
    pointer-events: none;
  }

  .video-background iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100vw;
    height: 56.25vw; /* 16:9 aspect ratio based on width */
    min-height: 100vh;
    min-width: 177.77vh; /* 16:9 aspect ratio based on height */
    object-fit: cover;
    pointer-events: none;
  }

  .video-content {
    position: relative;
    z-index: 2;
    color: white;
    padding: 2rem;
  }
}