.callout-large {
  width: calc(100vw - 20px);
  margin-left: calc(-50vw + 50% + 10px);
  background-size: cover;
  position: relative;
}

.callout-coloroverlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
  justify-content: center;
  align-items: center;
}

.callout-content-container {
    margin: 0 auto;
    width: 600px;
    padding: 20px;
    text-align: center;
    margin: 20px;
}
.callout-micro-title {text-transform: uppercase;font-family:"Roboto Condensed", sans-serif;font-weight: 700;font-size: 18px;line-height: 1.2em;}
.callout-title {text-transform: uppercase;font-family: "Roboto Condensed", sans-serif;font-weight: 700;font-size: 36px;line-height: 1.2em;}
.callout-subtitle {text-transform: uppercase;font-family: "Roboto Condensed", sans-serif;font-weight: 700;font-size: 28px;line-height: 1.2em;}
.callout-content {font-family:"Libre Franklin", sans-serif;padding: 8px 0;font-size: 18px;line-height: 1.4em;}

.whitetheme {background-color: rgba(var(--white),0.8); }
.whitetheme > .callout-micro-title, .whitetheme > .callout-title, .whitetheme > .callout-subtitle {color: rgb(var(--purple));}
.whitetheme > .callout-content {color: rgb(var(--dkgrey));}
.whitetheme > .callout-content a, .whitetheme > .callout-content a:link, .whitetheme > .callout-content a:active, .whitetheme > .callout-content a:visited, .whitetheme > .callout-content a:hover {color: rgb(var(--purple));}

.purpletheme {background-color: rgba(var(--purple),0.8);}
.purpletheme > .callout-micro-title {color: rgb(var(--gold));}
.purpletheme > .callout-title, .purpletheme > .callout-subtitle, .purpletheme > .callout-content {color: rgb(var(--white));}
.purpletheme > .callout-content a, .purpletheme > .callout-content a:link, .purpletheme > .callout-content a:active, .purpletheme > .callout-content a:visited, .purpletheme > .callout-content a:hover {color: rgb(var(--gold));}

.goldtheme {background-color: rgba(var(--gold),0.8);}
.goldtheme > .callout-title, .goldtheme > .callout-subtitle {color: rgb(var(--purple));}
.goldtheme > .callout-micro-title, .goldtheme > .callout-content {color: rgb(var(--black));}
.goldtheme > .callout-content a, .goldtheme > .callout-content a:active, .goldtheme > .callout-content a:visited, .goldtheme > .callout-content a:hover {color: rgb(var(--purple));}

.buttonarea {padding: 12px 0;display: block;}
.btnlink {display: block;margin: 0 0 4px 0;}

@media only screen and (min-width: 768px) {
.buttonarea {padding: 12px 0;display: flex;gap: 10px;justify-content: center;align-items: center;}
.btnlink {display: inline-block;}
};