*,
    *::before,
    *::after {
      box-sizing: border-box;
    }

    html,
    body {
      width: 100%;
      margin: 0;

      min-height: 100vh;
      min-height: 100dvh;
      overflow: hidden;
      font-family: Arial, sans-serif;
    }

    .hero {
        position: relative;
        display: grid;
        place-items: center;

        width: 100%;
        min-height: 100vh;
        min-height: 100dvh;

        padding: 24px;

        /* Default (780px and below) */
        background: url("bg-image.jpg") center center / cover no-repeat;
    }

    /* Screens wider than 780px */
    @media (min-width: 781px) {
        .hero {
            background-image: url("bg-image-wide.jpg");
        }
    }

    /* Optional dark overlay to improve logo visibility */
    .hero::before {
      content: "";
      position: absolute;
      inset: 0;
      background: rgba(0, 0, 0, 0.08);
    }

    .logo { /*
        position: absolute;
        top: 140px;
        left: 50%;
        transform: translateX(-50%);
        width: min(70vw, 380px);
        height: auto;
    */
    display: block;
    width: min(70vw, 380px);
    height: auto;
    }
    .hero-content {
        position: absolute;
        top: 140px;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px;          /* Space between logo and text */
        width: min(90vw, 700px);
    }

    .content-text { /*
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      text-align: center;
      color: #fff;
      font-family: system-ui;
      font-weight: lighter;
      font-size: 1.2rem;
      line-height: 1.3em; */
    text-align: center;
    color: #fff;
    font-family: system-ui;
    font-weight: 300;
    font-size: 1.2rem;
    line-height: 1.4;
    max-width: 700px;
    background: #0000000d;
    padding: 0 2rem;
    border-radius: 20px;

    }

    @media (max-width: 600px) {
      .hero {
        padding: 20px;
      }

      .logo {
        width: min(85vw, 430px);
      }
    }