.hero-banner {
  padding: 0 24px;
}
.hero-banner .text-max-width {
    max-width: 820px;
}
.hero-banner__container {
/*   background-image: url(no_such_asset_in_module_asset_url);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover; */
  border-radius: var(--border-radius);
  padding: var(--site-spacing-sm) 0;
  text-align: center;
  position:relative;
  z-index:222;
  overflow: hidden;
}
.hero-banner__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
}
.hero-banner__content-box{
  position:relative;
  z-index:222;
}
.hero-banner__image-group {
    max-width: 960px;
    margin: 0 auto;
    display: block;
    text-align: center;
  margin-bottom:20px;
  padding: 0 15px;
}
.hero-banner__image-group__first-group {
    display: flex;
    align-items: flex-end;
}
.image-group__first {
    border-radius: var(--border-radius);
    height: 140px;
    margin: 0 2% 0 0;
    width: 63%;
}
.image-group__second {
border-radius: var(--border-radius);
    height: 170px;
    margin: 0 0 0 2%;
    width: 33%;
}
.hero-banner__image-group__second-group {
    display: flex;
    justify-content: flex-end;
}
.image-group__third {
    border-radius: var(--border-radius);
    height: 130px;
    margin: -7% 7% 0 0;
    width: 55%;
}


#gradient-canvas {
    width:100%;
    height:100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    --gradient-color-1: #001150; 
    --gradient-color-2: #9B3A63; 
    --gradient-color-3: #1e62bb;
    --gradient-color-4: #B45746;  
}

{# media queries #}
@media (min-width:500px){
.image-group__first {
    height: 180px;
}
  .image-group__second {
    height: 230px;
}
  .image-group__third {
    height: 150px;
}
}

@media (min-width:640px){
.image-group__first {
    height: 220px;
    width: 68%;
}
  .image-group__second {
    height: 270px;
    width: 28%;
}
  .image-group__third {
    height: 175px;
    width: 50%;
        margin: -10% 8% 0 0;
}
}

@media (min-width: 768px) {
  .hero-banner__container {
    padding: var(--site-spacing-lg) 0;
  }
    #gradient-canvas {
    border-radius: 0 0 var(--border-radius) var(--border-radius);
  }
}

@media (min-width:991px){
.image-group__first {
    width: 73%;
  height: 320px;
}
  .image-group__second {
    width: 23%;
    height: 370px;
}
  .image-group__third {
    width: 50%;
    height: 220px;
}
}