.bannerComponent {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  /*text-align: center;*/
  overflow: hidden;
  width: 100%;
  height: 310px;
  border-radius: 8px;
}
.bannerComponent.text-left .content {
  left: 20px;
  /*text-align: left;*/
  justify-content: flex-start;
}
.bannerComponent.text-right .content {
  right: 20px;
  /*text-align: right;*/
  justify-content: flex-start;
}
.bannerComponent.text-bottom .content {
  display: flex;
  width: 100%;
  height: auto;
  padding: 16px;
  bottom: 0px;
  border-radius: 0px;
}
.bannerComponent.text-bottom .content .buttonLink {
    /*text-align: left;*/
    /*margin: 0px;*/
    margin-top: 16px;
    align-self: flex-end;
}
.bannerComponent.text-bottom .content h3 {
  margin: 0px 0px 8px;
}
    .bannerComponent.gallery-text-center .content {
        left: 50%;
        transform: translateX(-50%);
        /*text-align: center;*/
        justify-content: center;
    }
    .bannerComponent.gallery-text-center .content .buttonLink {
        align-self: center;
    }
.bannerComponent .content {
  position: absolute;
  opacity: 1;
  display: flex;
  flex-direction: column;
  padding: 16px;
  justify-content: center;
  width: 356px;
  height: auto;
  background: #FFFFFF 0% 0% no-repeat padding-box;
  border-radius: 8px;
  opacity: 0.9;
}
.bannerComponent h3 {
  margin: 0px 0px 16px;
  /*text-align: right;*/
  font: normal normal 600 25px/30px;
  letter-spacing: 0px;
  color: #123A5E;
  opacity: 1;
}
.bannerComponent .summary {
  /*text-align: right;*/
  font: normal normal normal 18px/22px;
  letter-spacing: 0px;
  color: #000000;
}
.bannerComponent .buttonLink {
  margin-top: 20px;
}
.bannerComponent .image {
  width: 100%;
  height: 310px;
}

@media screen and (max-width: 768px) {
  .bannerComponent {
    height: auto;
    text-align: center;
    border-radius: 0;
    flex-direction: column;
  }
  .bannerComponent.text-right .content {
    right: 0px;
  }
  .bannerComponent.text-left .content {
    left: 0px;
  }
  .bannerComponent .content {
    position: relative;
    width: 100%;
    height: auto;
    padding: 0px;
  }
  .bannerComponent .image {
    width: 100%;
    height: auto;
    border-radius: 8px;
  }
  .bannerComponent .title {
    font-size: 20px;
    margin: 0px;
    text-align: center;
  }
  .bannerComponent .summary {
    font-size: 16px;
    margin: 0px;
    text-align: center;
  }
  .bannerComponent .buttonLink {
    margin-top: 7px;
    width: 100%;
  }
  .bannerComponent .buttonLink a {
    width: 100%;
  }
  .bannerComponent .button {
    display: inline-block;
    padding: 10px 20px;
    font-size: 16px;
    text-decoration: none;
    color: #fff;
    background-color: #3098cf;
    border-radius: 5px;
  }
}