.error404__content {
  display: grid;
  justify-items: center;
  align-items: center;
  margin-block-end: 13rem;

  h1 {
    font-size: 9.75rem;
    text-align: center;
  }

  h2 {
    font-size: 3.375rem;
    text-align: center;
  }

  p {
    color: var(--color-primary);
    margin-block-end: 3.6rem;
    max-width: 60ch;
    text-align: center;
  }
  .hero-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -1;
  }
  .hero-frontpage header,
  .hero-frontpage div,
  .hero-frontpage button {
    position: relative;
  }

  .hero-background .ellipse {
    position: absolute;
    pointer-events: none;
  }

  .ellipse--2 {
    top: -50px;
    right: 0;
    animation: float2 8s ease-in-out infinite alternate;
  }

  .ellipse--3 {
    top: 100px;
    right: 0px;
    animation: float3 3s ease-in-out infinite alternate;
  }

  .ellipse--4 {
    top: 5%;
    right: 250px;
    animation: float4 5s ease-in-out infinite alternate;
  }

  .lines-wrapper {
    position: absolute;
    top: -10px;
    left: 300px;
    display: flex;
    gap: 40px;

    @media screen and (max-width: 768px) {
      display: none;
    }
  }

  .hero-background .line {
    left: 300px;
    display: block;
  }
}

/* Keyframes */
@keyframes float2 {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(50px);
  }
}

@keyframes float3 {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(80px);
  }
}

@keyframes float4 {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(70px);
  }
}

@media screen and (max-width: 1024px) {
  .error404__content .hero-background {
    top: 10%;
  }

  .lines-wrapper {
    top: 60px;
    left: 40px;
  }
}

@media screen and (max-width: 768px) {
  .ellipse--3 {
    top: 100px;
    right: 100px;
    height: 600px;
  }

  .ellipse--4 {
    top: 5%;
    right: 150px;
    height: 200px;
  }
}