.hero {
  margin-bottom: 3.75rem; }
  @media all and (min-width: 768px) {
    .hero {
      margin-bottom: 5rem; } }
  @media all and (min-width: 1024px) {
    .hero {
      margin-bottom: 6.25rem; } }
  @media all and (min-width: 2070px) {
    .hero {
      margin-bottom: 10rem; } }
  .hero .hero-img {
    width: 100%;
    height: auto; }
  .hero .img-left, .hero .img-right {
    position: absolute;
    z-index: 2;
    max-width: 20%; }
  .hero .img-left {
    left: 20px; }
    @media all and (min-width: 768px) {
      .hero .img-left {
        left: 40px; } }
    @media all and (min-width: 1560px) {
      .hero .img-left {
        left: 80px; } }
  .hero .img-right {
    bottom: 0;
    right: 20px; }
    @media all and (min-width: 768px) {
      .hero .img-right {
        right: 40px; } }
    @media all and (min-width: 1560px) {
      .hero .img-right {
        right: 80px; } }
  .hero .outer-layout-wrap {
    position: relative;
    overflow: hidden; }
    .hero .outer-layout-wrap .deskImg {
      display: none; }
    .hero .outer-layout-wrap .smallImg {
      display: inline; }
    .hero .outer-layout-wrap .gradient {
      position: absolute;
      width: calc(100% - 40px);
      left: 20px;
      height: 75%;
      bottom: 0;
      z-index: 1;
      background: linear-gradient(0deg, rgba(0, 0, 190, 0.801541) 0%, rgba(0, 0, 190, 0) 80%); }
      @media all and (min-width: 768px) {
        .hero .outer-layout-wrap .gradient {
          width: calc(100% - 80px);
          left: 40px; } }
      @media all and (min-width: 1560px) {
        .hero .outer-layout-wrap .gradient {
          width: calc(100% - 160px);
          left: 80px; } }
    .hero .outer-layout-wrap .headlineWrap {
      position: absolute;
      bottom: 0;
      z-index: 20;
      left: 20px;
      right: 20px;
      padding: 0 20px 25px 20px; }
      @media all and (min-width: 768px) {
        .hero .outer-layout-wrap .headlineWrap {
          left: 40px;
          right: 40px; } }
      @media all and (min-width: 1560px) {
        .hero .outer-layout-wrap .headlineWrap {
          left: 80px;
          right: 80px; } }
      @media all and (min-width: 768px) {
        .hero .outer-layout-wrap .headlineWrap {
          padding: 0 40px 60px 40px; } }
      @media all and (min-width: 1266px) {
        .hero .outer-layout-wrap .headlineWrap {
          padding-left: clamp(2.5rem, calc(-0.65rem + 3.99vw), 4.5rem);
          padding-bottom: clamp(3.75rem, calc(0.1rem + 4.61vw), 6.0625rem); } }
      .hero .outer-layout-wrap .headlineWrap h2 {
        padding-bottom: .3125rem; }
        @media all and (min-width: 1266px) {
          .hero .outer-layout-wrap .headlineWrap h2 {
            padding-bottom: clamp(0.3125rem, calc(-0.18rem + 0.62vw), 0.625rem); } }
    @media all and (max-width: 1023px) {
      .hero .outer-layout-wrap {
        aspect-ratio: 1/ 1; } }
  @media all and (min-width: 1024px) {
    .hero .deskImg {
      display: inline !important; }
    .hero .smallImg {
      display: none !important; }
    .hero.fullheight .outer-layout-wrap {
      height: calc(100vh - var(--header-medium)); } }
  @media all and (min-width: 1024px) and (min-width: 1266px) {
    .hero.fullheight .outer-layout-wrap {
      height: calc(100vh - clamp(7.0625rem, calc(-0.52rem + 9.58vw), 11.875rem)); } }
  @media all and (min-width: 1024px) {
      .hero.fullheight .outer-layout-wrap .hero-img {
        width: 100%;
        height: 100%;
        object-fit: cover; } }

/*# sourceMappingURL=page.css.map */