.component__banner{
  margin-bottom:60px;
  margin-top:10px;
}
@media screen and (min-width:768px){
  .component__banner{
    margin-bottom:80px;
    margin-top:14px;
  }
}
@media screen and (min-width:1200px){
  .component__banner{
    margin-bottom:100px;
  }
}

.banner{
  border:1px solid #e0eaf7;
  border-radius:.625rem;
  height:28.75rem;
  position:relative;
}
@media screen and (min-width:768px){
  .banner{
    height:22.5rem;
  }
}
@media screen and (min-width:1200px){
  .banner{
    height:28.75rem;
  }
}

.banner__image{
  background-position-x:75%;
  background-repeat:no-repeat;
  background-size:cover;
  border-bottom-left-radius:.625rem;
  border-bottom-right-radius:.625rem;
  bottom:0;
  height:50%;
  position:absolute;
  width:100%;
  z-index:-1;
}
.banner__image:before{
  background:linear-gradient(180deg, #fff 0, hsla(0,0%,100%,0));
  content:"";
  height:20%;
  left:0;
  position:absolute;
  right:0;
  top:0;
}
@media screen and (min-width:768px){
  .banner__image{
    background-position:top;
    background-position-x:0;
    border-radius:.625rem;
    bottom:auto;
    height:100%;
  }
  .banner__image:before{
    display:none;
  }
}

.banner__content{
  height:100%;
}

.banner__text-block{
  align-items:center;
  color:#252525;
  display:flex;
  flex-direction:column;
  height:100%;
  justify-content:flex-start;
  padding:1.25rem;
}
@media screen and (min-width:768px){
  .banner__text-block{
    align-items:start;
    justify-content:space-between;
    padding:1.5rem;
    width:60%;
  }
}
@media screen and (min-width:1200px){
  .banner__text-block{
    padding:2.5rem;
    width:50%;
  }
}

.banner__title{
  color:#15a8f1;
  font-family:var(--font-normal);
  font-size:1.75rem;
  font-weight:500;
  line-height:112%;
  margin:0 0 .5rem;
}
.banner__title--black{
  color:#252525;
}
.banner__title--white{
  color:#fff;
}
.banner__title--blue{
  color:#15a8f1;
}
.banner__title--orange{
  color:#f60;
}
@media screen and (min-width:768px){
  .banner__title{
    font-size:2rem;
  }
}
@media screen and (min-width:1200px){
  .banner__title{
    font-size:3rem;
    margin-bottom:1rem;
  }
}

.banner__description{
  font-size:1rem;
}
.banner__description--black{
  color:#252525;
}
.banner__description--white{
  color:#fff;
}
.banner__description--blue{
  color:#15a8f1;
}
.banner__description--orange{
  color:#f60;
}
@media screen and (min-width:768px){
  .banner__description{
    font-size:1.125rem;
  }
}

.banner__btn{
  width:100%;
}
@media screen and (min-width:768px){
  .banner__btn{
    width:auto;
  }
}

.banner__btn .component-button{
  margin:1rem 0;
  width:100%;
}
@media screen and (min-width:768px){
  .banner__btn .component-button{
    margin:initial;
    width:auto;
  }
}

.banner__btn .component-button__item{
  width:100%;
}
@media screen and (min-width:768px){
  .banner__btn .component-button__item{
    width:auto;
  }
}