.top-elements {
  margin-top: calc(-1px - var(--header-height));

  .element-container {
    @media (max-width: 1280px) {
      max-width: 100%;
      padding-left: 0;
      padding-right: 0;
    }
  }

  .element-container_circle {
    div {
      position: absolute;
      width: 100dvw;
      top: -50%;
      left: -35%;
    }
  }

  .element-container_regular-rectangle {
    div {
      position: absolute;
      top: calc(-1 * min(5dvw, 400px));
      right: -10%;
      width: min(90dvw, 1200px);
    }
  }

  .element-container_curved-rectangle {
    div {
      position: absolute;
      right: -60%;
      width: min(140dvw, 1800px);
    }
  }

  .element-container_regular-curved-rectangle {
    .site-element_regular-rectangle {
      position: absolute;
      left: -20%;
      width: min(60dvw, 600px);
    }

    .site-element_curved-rectangle {
      position: absolute;
      right: -35%;
      width: min(80dvw, 900px);
    }
  }
}

@media screen and (min-width: 576px) {
  .top-elements {
    .element-container_circle {
      div {
        width: 90dvw;
        top: -40%;
        left: -30%;
      }
    }
  }
}

@media screen and (min-width: 992px) {
  .top-elements {
    .element-container_circle {
      div {
        top: -60%;
        left: -20%;
        width: 905px;
      }
    }
  }
}