.hero {
  container: heor / inline-size;
  background: url('/assets/images/hero-bg.avif') no-repeat center / cover;

  at-inner {

    h1 {
      text-transform: uppercase;

      span {
        display: block;
        width: 100%;

        &:nth-of-type(2) {
          max-width: var(--sp-913);
          margin-inline-start: auto;
        }
      }
    }

    hero-content {
      display: grid;
      grid-template-columns: min(var(--sp-330), 100%) 1fr;
      gap: var(--sp-20);
      grid-template-areas:
        "image p"
        "image a";
      max-width: var(--sp-913);
      margin-inline-start: auto;
      align-items: end;
      margin-block-start: var(--sp-64-48);

      @container (inline-size < 40.625rem) {
        grid-template-columns: 1fr;
        grid-template-areas:
          "image"
          "p"
          "a";
      }

      img {
        grid-area: image;
      }

      p {
        grid-area: p;
        color: var(--white);
      }

      a {
        grid-area: a;
      }
    }
  }
}

.blog-preview {
  ul {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(var(--sp-280), 100%), 1fr));
    gap: var(--sp-20);

    li {
      aspect-ratio: 330 / 440;
      transition:
        background-size var(--anime-time) var(--anime-func),
        background-position var(--anime-time) var(--anime-func);

      &:nth-of-type(1) {
        background: url('/assets/images/strategic-roadmap-keystone-manufacturing.avif') no-repeat center / cover;

        hidden-content {
          transform: translateX(100%);
        }
      }

      &:nth-of-type(2) {
        background: url('/assets/images/clarity-driven-brand-pivot.avif') no-repeat center / cover;

        hidden-content {
          transform: translateX(-100%);
        }
      }

      &:nth-of-type(3) {
        background: url('/assets/images/streamlining-operations-aurora-wellness.avif') no-repeat center / cover;

        hidden-content {
          transform: translateY(100%);
        }
      }

      &:nth-of-type(4) {
        background: url('/assets/images/business-strategic.avif') no-repeat center / cover;

        hidden-content {
          transform: translateY(-100%);
        }
      }

      blur-layer {
        display: block;
        padding: var(--sp-24);
        height: 100%;
        backdrop-filter: blur(var(--sp-16)) opacity(0%);
        overflow: clip;
        transition: backdrop-filter var(--anime-time) var(--anime-func);
      }

      p+p {
        margin-block-start: var(--sp-16);
      }

      hidden-content {
        display: block;
        margin-block-start: var(--sp-32);
        visibility: hidden;
        opacity: 0;
        transition:
          opacity var(--anime-time) var(--anime-func),
          transform var(--anime-time) var(--anime-func),
          opacity var(--anime-time) var(--anime-func),
          visibility var(--anime-time) var(--anime-func) allow-discrete;

        a {
          margin-inline-start: auto;
          margin-block-start: var(--sp-32);
        }
      }

      &:hover {
        &:nth-of-type(1),
        &:nth-of-type(2) {
          hidden-content {
            transform: translateX(0);
            opacity: 1;
          }
        }

        &:nth-of-type(3),
        &:nth-of-type(4) {
          hidden-content {
            transform: translateY(0);
            opacity: 1;
          }
        }

        hidden-content {
          visibility: visible;
          opacity: 1;
        }

        blur-layer {
          backdrop-filter: blur(var(--sp-16)) opacity(100%);
        }
      }
    }
  }
}

.results {
  h2 {
    max-width: var(--sp-1030);
  }

  ul {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(var(--sp-280), 100%), 1fr));
    gap: var(--sp-20);
    margin-block-start: var(--sp-128-48);
  }
}

.who-is-lumina {
  container: who-is-lumina / inline-size;

  at-inner {
    display: grid;
    grid-template-columns: auto auto;
    grid-template-areas:
      "h2 h2"
      "text image";
    column-gap: var(--sp-137-20);

    h2 {
      grid-area: h2;
    }

    text-wrapper {
      grid-area: text;
      display: block;
      max-width: min(var(--sp-563), 100%);

      a {
        margin-block-start: var(--sp-32-20);
      }
    }

    img {
      grid-area: image;
    }

    @container (inline-size < 40.625rem) {
      grid-template-columns: 1fr;
      grid-template-areas:
        "h2"
        "text"
        "image";
      row-gap: var(--sp-48);

      img {
        margin-block-start: var(--sp-20);
      }
    }
  }
}

.what-lumina-offer {
  at-inner {
    padding-block-end: 0;
  }

  img {
    padding-block: var(--sp-64-48) var(--sp-128-48);
  }

  ul {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(var(--sp-350), 100%), 1fr));
    gap: var(--sp-20);

    li {
      background-color: var(--black-tint-12);
      padding: var(--sp-24);

      p {
        margin-block-start: var(--sp-16);
      }
    }
  }
}

.how-lumina-works {
  container: how-lumina-works / inline-size;

  .mo {
    display: none;
  }

  ul {
    li {
      display: flex;
      flex-direction: row;
      gap: var(--sp-20);
      justify-content: space-between;
      align-items: center;
      padding-block: var(--sp-40);

      @container (inline-size < 31.25rem) {
        flex-direction: column;

        .mo {
          display: block;
        }

        .sd {
          display: none;
        }
      }

      hgroup {
        max-width: min(var(--sp-563), 100%);

        p {
          margin-block-start: var(--sp-16);
        }
      }

      svg {
        width: 100%;
        height: fit-content;
        max-width: var(--sp-447);
      }
    }
  }
}

.what-will-you-get {
  container: what-will-you-get / inline-size;

  at-inner {
    height: 300vh;
  }

  h2 {
    position: sticky;
    top: 50%;
    transform: translateY(-50%);
    margin-block-end: 0;
    text-align: center;
    z-index: -1;
  }

  float-card {
    display: grid;
    grid-template-rows: 1fr auto;
    grid-template-areas:
      "up"
      "bottom";
    max-width: var(--sp-563);
    aspect-ratio: 563 / 316;
    padding: var(--sp-24);

    h3 {
      grid-area: bottom;
    }

    p,
    svg {
      grid-area: up;
      transition:
        opacity var(--anime-time) var(--anime-func),
        visibility var(--anime-time) var(--anime-func) allow-discrete;
    }

    p {
      visibility: hidden;
      opacity: 0;
    }

    svg {
      margin-inline-start: auto;
    }

    &:nth-of-type(1) {
      background-color: var(--brand-blue);
      margin-block-end: var(--sp-224);
      margin-block-start: 100vh;
    }

    &:nth-of-type(2) {
      background-color: var(--brand-red);
      margin-inline-start: auto;
    }

    &:hover {
      p {
        visibility: visible;
        opacity: 1;
      }

      svg {
        visibility: hidden;
        opacity: 0;
      }
    }
  }

  @container (inline-size < 62.5rem) {
    at-inner {
      height: 250vh;
    }

    float-card {
      &:nth-of-type(1) {
        margin-block-start: 75vh;
      }
    }
  }

  @container (inline-size < 48rem) {
    at-inner {
      height: 200vh;
    }

    float-card {
      &:nth-of-type(1) {
        margin-block-start: 50vh;
      }
    }
  }

  @container (inline-size < 31.25rem) {
    at-inner {
      height: 150vh;
    }

    float-card {
      &:nth-of-type(1) {
        margin-block-start: 25vh;
      }
    }
  }
}

.cta {
  container: cta / inline-size;

  at-inner {
    display: flex;
    flex-direction: row;
    align-items: end;
    justify-content: center;
    padding-block-end: var(--sp-64-48);

    h2 {
      max-width: var(--sp-913);
      margin-block-end: 0;
    }

    svg {
      width: 100%;
      height: auto;
    }

    @container (inline-size < 28.125rem) {
      a {
        display: none;
      }
    }
  }

  picture {
    margin-block-end: var(--sp-128-48);
  }
}