Template:Bannerbox/styles.css

/* styles for banner template */

.bannerbox {display:flex; background:#f1f3f9;}
.bannerbox .floatleft {margin:0;}
.banner-image { flex-grow:0;  flex-basis:auto;}
.banner-content {flex-grow:1; flex-shrink:1; flex-basis:60%}
.bannerbox .banner-title .bannerhd {font-size:1.6rem; font-weight:bold}
.bannerbox  h1.bannerhd  {font-size:1.6rem; font-weight:bold; margin:0; padding:0}
.bannerbox .banner-text {font-size:1.3rem;}
.banner-content {padding:10px;}
.bannerbox.bgicon1, .bannerbox.bgicon2, .bannerbox.bgicon3, .bannerbox.swoosh  {position:relative;overflow:hidden}
.bannerbox.bgicon1::before {color:white; opacity: 0.5; font-size:15em;font-family: "Font Awesome 6 Free";  font-weight: 900;  content: "\f0ac";
 position: absolute; top: -95px;right: 10px;}
.bannerbox.bgicon2::before {color:white; opacity: 0.5; font-size:9.5em; font-family: "bootstrap-icons"; font-weight: 400;  content: "\f1dd"; position: absolute; top: -40px; right: 10px;}
.bannerbox.bgicon3::before {color:white; opacity: 0.5; font-size:9.5em; font-family: "Font Awesome 6 Free"; font-weight: 900;  content: "\e592"; position: absolute; top: -38px; right: 5px;}
.bannerbox.swoosh {border-bottom: 1px solid #a6a6a7;border-radius: 0 0 80% 0%; overflow: hidden;position:relative;}
@media only screen
  and (max-width: 600px) {
.bannerbox {flex-wrap:wrap;}
.banner-image {flex-basis:100%;}
.banner-image img{ width: 100%;}
.banner-content {flex-basis:100%}
}