.layout:has(.fact-ribbon) {
  padding-top:15px;
  padding-bottom:15px;
}

.fact-ribbon {
  padding:15px 0;
}

.fact-ribbon:not(:has(a)) {
  display:flex;
  flex-direction: column;
  align-items:center;
  justify-content:center;
}

@media only screen and (min-width: 768px) {
  .fact-ribbon:not(:has(a)) {
    flex-direction: row;
  }
}

.fact-ribbon a {
  display:flex;
  flex-direction: column;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  padding:4px;
  position:relative;
  transition:.2s all ease;
}

@media only screen and (min-width: 768px) {
  .fact-ribbon a {
    flex-direction: row;
  }
}

#middle .bg-green .fact-ribbon a:hover {
  color:var(--white);
}

.fact-ribbon a:focus,
#middle .fact-ribbon a:focus {
  background:none;
  outline:none;
  color:var(--under-the-elms);
}

.bg-green .fact-ribbon a:focus,
#middle .bg-green .fact-ribbon a:focus {
  color:var(--white);
}

.fact-ribbon a:before,
.fact-ribbon a:after {
  position: absolute;
  top: -12px;
  right: -12px;
  bottom: -12px;
  left: -12px;
  content: '';
  opacity: 0;
  transition: opacity 0.35s, transform 0.35s;
}

.fact-ribbon a:before {
  border-top: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: scale(0, 1);
}

.fact-ribbon a:after {
  border-right: 1px solid currentColor;
  border-left: 1px solid currentColor;
  transform: scale(1, 0);
}

#middle .fact-ribbon a:is(:hover, :focus):before,
#middle .fact-ribbon a:is(:hover, :focus):after {
  opacity: 1;
  transform: scale(1);
  color:currentColor;
}

.fact-ribbon span {
  flex-basis:100%;
  text-align:center;
}

@media only screen and (min-width: 768px) {
  .fact-ribbon span {
    flex-basis:auto;
    text-align:unset;
  }
}

.fact-ribbon .fact-heading {
  font-family:var(--text-display);
  font-weight:900;
  font-size:48px;
  line-height:52px;
  margin-right:0;
  outline:1px solid transparent;
  outline-offset:4px;
  transition:.2s all ease;
}

.bg-trillium .fact-ribbon .fact-heading {
  color:var(--under-the-elms);
}

@media only screen and (min-width: 768px) {
  .fact-ribbon .fact-heading {
    margin-right:15px;
  }
}

.fact-ribbon .fact-heading.long-text {
  font-size:36px;
  line-height:40px;
}

.fact-ribbon a:focus span.fact-heading,
#middle .fact-ribbon a:focus span.fact-heading {
  background:none;
  color:var(--under-the-elms);
}

.bg-green .fact-ribbon a:focus span.fact-heading,
#middle .bg-green .fact-ribbon a:focus span.fact-heading {
  color:var(--white);
}

.fact-ribbon .fact-body {
  font-family:var(--text-sans);
  font-weight:700;
  font-size:18px;
  line-height:24px;
  transition:.2s all ease;
}

.bg-trillium .fact-ribbon .fact-body {
  color:var(--under-the-elms);
}

.fact-ribbon a:focus span.fact-body,
#middle .fact-ribbon a:focus span.fact-body {
  background:none;
  color:var(--under-the-elms);
}

.bg-green .fact-ribbon a:focus span.fact-body,
#middle .bg-green .fact-ribbon a:focus span.fact-body {
  color:var(--white);
}

.fact-ribbon span.fact-body .reference {
  font-size:22px;
  line-height:24px;
  font-weight:600;
}

.bg-trillium .fact-ribbon span.fact-body .reference {
  color:var(--under-the-elms);
}

.fact-ribbon a:focus span.fact-body .reference,
#middle .fact-ribbon a:focus span.fact-body .reference {
  background:none;
  color:var(--under-the-elms);
}

.bg-green .fact-ribbon a:focus span.fact-body .reference,
#middle .bg-green .fact-ribbon a:focus span.fact-body .reference {
  color:var(--white);
}

/* Styles specific to layout builder preview */
/* Remove outside padding on fact ribbon section */
.ouws_wspage:has(.node-ad-landing-page-layout-builder-form) .layout:has(.fact-ribbon) {
  padding:0;
}

.ouws_wspage:has(.node-ad-landing-page-layout-builder-form) .layout:has(.fact-ribbon) .layout__region .layout-builder-block {
  padding:15px 0px;
}

.ouws_wspage:has(.node-ad-landing-page-layout-builder-form) .layout:has(.fact-ribbon) .layout__region .fact-heading {
  display:inline-block;
  padding:0;
}