main {
  width: 100%;
  height: 90dvh;
  display: flex;
  justify-content: center;
  flex-direction: column;
  position: relative;

  h1 {
    padding-bottom: 1rem;
    font-size: 250%;
  }

  .cta {
    a {
      background-color: var(--hl);
      padding: 0.5rem;
      color: var(--l);
      font-weight: 600;

      &:nth-child(1) {
        background-color: var(--d);
      }
    }
  }

  .bgImg {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;

    img {
      margin-top: 5rem;
      width: 100%;

      translate: 40% 30%;
    }
  }
}

@media (min-width: 568px) {
  main {
    h1 {
      font-size: 400%;
    }

    .bgImg {
      display: flex;
      align-items: center;
      justify-content: right;

      img {
        width: 50%;
        translate: 0 0;
      }
    }
  }
}