section.callout .inner {
    display: grid;
    grid-template-columns: var(--base-grid);
    row-gap: 
  
  
  
  
    
      
    
    
      1.25rem
    
  
;
}
.home section.callout .inner {
    grid-template-columns: var(--base-grid);
    row-gap: var(--spacing-small);
}
@media (max-width: 849px) {
    section.callout.overlap .inner {
        padding-bottom: calc(
  
  
  
  
    
      
    
    
      3.125rem
    
  
 / 2);
    }
}
@media (min-width: 850px) {
    /* section.callout.overlap {
        margin-bottom: -30px;
        position: relative;
        z-index: 5;
    } */
    section.callout.overlap.blue,
    section.callout.overlap.white,
    section.callout.overlap.white-gradient {
        background: none transparent;
    }
    section.callout.blue.lightmode.overlap .inner {
        background-color: var(--color-blue-light);
    }
    section.callout.overlap.blue .inner {
        background-color: var(--color-blue-dark);
    }
    section.callout.overlap.white .inner {
        background-color: #fff;
    }
    section.callout.overlap.white-gradient .inner {
        background: linear-gradient(to bottom, #fff, var(--color-blue-light));
    }
}
section.callout hr {
    background: transparent;
    border-top: 1px currentColor solid;
    padding-bottom: 
  
  
  
  
    
      
    
    
      1.25rem
    
  
;
    margin: 0;
}
/* section.callout.darkmode hr {
    background: var(--color-white);
}
section.callout.lightmode hr {
    background: var(--color-text);
} */
section.callout p {
    margin: 0;
}
section.callout p + p {
    margin-top: 20px;
}
section.callout.icons .inner,
section.callout.carousel .inner {
    row-gap: 
  
  
  
  
    
      
    
    
      2.5rem
    
  
;
}
section.callout .inner > hr,
section.callout .content,
section.callout .buttons {
    grid-column: 2 / span 12;
    text-align: center;
}
section.callout > .buttons {
    display: grid;
    grid-template-columns: auto;
    justify-content: center;
    align-items: center;
    width: 100%;
    gap: 15px;
}
@media (min-width: 850px) {
    section.callout > .buttons {
        grid-auto-flow: column;
    }
}
section.callout.simple .content {
    grid-column: 3 / span 10;
}
section.callout .icons {
    grid-column: 2 / span 12;
}

section.callout.icons .listing {
    display: grid;
    grid-template-columns: 100%;
    gap: 
  
  
  
  
    
      
    
    
      1.875rem
    
  
;
    grid-column: 1 / span 14;
}
.home section.callout.icons .listing {
    column-gap: var(--spacing-large);
}
.home section.callout.icons .item .description {
    display: grid;
    grid-template-columns: 65px 1fr;
    gap: var(--spacing-tiny);
}
.home section.callout.icons .item .icon {
    margin: 0;
}
section.callout.icons .listing p {
    text-wrap: pretty;
}
@media (min-width: 850px) {
    section.callout.icons .listing.col-2 {
        grid-template-columns: repeat(2, 1fr);
    }
    section.callout.icons .listing.col-3 {
        grid-template-columns: repeat(3, 1fr);
    }
    section.callout.icons .listing.col-4 {
        grid-template-columns: repeat(4, 1fr);
    }
}
body:not(.home) section.callout.icons .item .icon {
    float: left;
    max-width: 35px;
    width: 100%;
    margin: 0 15px 5px 0;
}
@media (min-width: 850px) {
    section.callout.icons .item .icon {
        max-width: 65px;
        margin: 0 20px 5px 0;
    }
}
.home section.callout.icons .item img {
    width: 100%;
    height: auto;
    max-width: 84px;
    max-height: 89px;
}
body:not(.home) section.callout.icons .item img {
    max-height: 68px;
    width: 100%;
    height: 100%;
}
section.callout.icons .item {
    display: grid;
    grid-template-columns: 100%;
    gap: 
  
  
  
  
    
      
    
    
      1.25rem
    
  
;
    /* align-items: center; */
}
section.callout.icons .listing.align-center .description {
    align-items: center;
}
/* @media (min-width: 850px) {
    section.callout.icons .item {
        grid-template-columns: 1fr 3fr;
    }
} */
section.callout.icons .icons {
    display: grid;
    grid-template-columns: var(--base-grid);
    row-gap: calc(
  
  
  
  
    
      
    
    
      3.125rem
    
  
 / 2);
}
.home section.callout.icons .icons {
    grid-template-columns: var(--base-grid);
}
section.callout.icons .item p strong:first-of-type {
    font-size: clamp(16px, 0.643rem + 0.952vw, 24px);
}
section.callout.icons .icons p.heading {
    grid-column: 1 / span 14;
}
section.callout.icons .icons p.heading.bordered {
    border-bottom: 1px solid #fff;
}
section.callout.icons.white .icons p.heading,
section.callout.icons.white-gradient .icons p.heading {
    border-bottom: 1px solid var(--color-blue-dark);
}
section.callout.icons.lightmode .listing a:not(.button) {
    font-weight: bold;
    color: var(--color-blue);
}
section.callout.icons.lightmode .listing a:not(.button):hover {
    font-weight: bold;
    color: var(--color-blue-dark);
}
/* section.callout .buttons.overlap {
    padding: 0 
  
  
  
  
    
      
    
    
      1.25rem
    
  
 
  
  
  
  
    
      
    
    
      3.125rem
    
  
;
} */
/* @media (min-width: 850px) {
    section.callout .buttons.overlap {
        padding: 0;
        margin-top: -30px;
    }
} */
section.callout p.heading.size-default,
section.callout p.label {
    font-size: clamp(
  
  
  
  
    
      
    
    
      1.5rem
    
  
, 1.232rem + 0.714vw, 
  
  
  
  
    
      
    
    
      1.875rem
    
  
) !important;
    
    line-height: 1.1 !important;
}
.home section.callout.lightmode p.heading {
    color: var(--color-blue-dark);
    font-weight: normal;
}
section.callout p.heading.bold {
    font-weight: bold;
}
section.callout p.label {
    color: var(--color-blue);
    font-weight: bold;
}
section.callout:not(.simple) p.heading {
    font-weight: bold;
}
section.callout p sup {
    line-height: 75%;
}
/* section.callout .content p + p {
    margin-top: 5px;
}
section.callout.simple .content p + p {
    margin-top: 20px;
} */
section.callout .content p.label + p.heading + p.description {
    margin-top: 15px;
}
section.callout.carousel .carousel {
    grid-column: 2 / span 12;
}
section.callout.carousel .listing,
section.callout.carousel .items {
    display: grid;
}
section.callout.carousel .listing {
    grid-template-columns: var(--base-grid);
    position: relative;
}
section.callout.carousel .listing[data-active] {
    grid-template-rows: 1fr 83px 1fr;
}
@media (min-width: 850px) {
    section.callout.carousel .listing[data-active] {
        grid-template-rows: 1fr 83px 1fr 60px;
    }
}
section.callout.carousel .items {
    grid-column: 1 / span 14;
    z-index: 3;
    row-gap: 40px;
    position: relative;
    
    
}
section.callout.carousel .listing[data-active] .items {
    grid-row: 1 / span 3;
}

@media (min-width: 850px) {
    section.callout.carousel .items {
        grid-column: 2 / span 12;
        display: flex;
        overflow-x: hidden;
        scroll-snap-type: x mandatory;
    }
    section.callout.carousel .listing[data-count="1"] .items,
    section.callout.carousel .listing[data-count="2"] .items {
        justify-content: center;
    }

    section.callout.carousel .dots {
        grid-column: 2 / span 12;
        grid-row: 4;
        z-index: 1;
    }
    section.callout.carousel .arrows {
        grid-column: 1 / span 14;
        grid-row: 2;
        z-index: 2;
    }
}


@media (min-width: 850px) {
    section.callout.carousel .item {
        
        flex: 0 0 calc(100% / 3);
        scroll-snap-align: start;
    }
    section.callout.carousel .listing[data-count="1"] .item {
        flex: 0 0 calc(100% / 2.5);
    }
    section.callout .content p:not(.heading) {
        max-width: 850px;
        margin-inline: auto;
        text-wrap: pretty;
    }
}
section.callout.carousel .item > a,
section.callout.carousel .item > span {
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: auto auto auto 1fr;
    gap: 10px;
    position: relative;
    height: 100%;
    align-items: end;
}
@media (min-width: 850px) {
    section.callout.carousel .item > a,
    section.callout.carousel .item > span {
        padding: 
  
  
  
  
    
      
    
    
      1.25rem
    
  
;
    }
}
section.callout.carousl .item a > div,
section.callout.carousel .item > span > div {
    position: relative;
    z-index: 3;
}
@media (min-width: 850px) {
    section.callout.carousel .item.active a:after,
    section.callout.carousel .item.active > span:after {
        opacity: 1;
    }
    section.callout.carousel .item a:after,
    section.callout.carousel .item > span:after {
        z-index: -1;
        content: '';
        width: 100%;
        height: 100%;
        top: 0;
        opacity: 0;
        transition: opacity var(--base-speed);
        left: 0;
        position: absolute;
        background: linear-gradient(to bottom, rgba(255,255,255,.5) 0%, rgba(255,255,255,.2) 50%, rgba(255,255,255,.5) 100%);
    }

    section.callout.carousel .item a:before,
    section.callout.carousel .item > span:before {
        width: 1px;
        background-color: var(--color-blue-dark);
        height: 100%;
        position: absolute;
        top: 0;
        right: -1px;
        content: '';
    }
    section.callout.carousel .item:last-of-type a:before,
    section.callout.carousel .item:last-of-type > span:before {
        display: none;
    }
}
section.callout.carousel .item a > div,
section.callout.carousel .item > span > div {
    grid-column: 1;
}
section.callout.carousel .item .photo {
    grid-row: 1 / span 2;
}
section.callout.carousel .item .buttons {
    grid-row: 2 / span 2;
}
section.callout.carousel .item .description {
    grid-row: 4;
    align-self: start;
}
section.callout.carousel .item p {
    text-align: center;
    color: var(--color-text);
    text-wrap: balance;
    line-height: 1.3;
}
section.callout.carousel .item span.button {
    width: calc(100% - 90px);
}
.home section.callout.carousel .item span.button {
    min-width: min-content;
    width: 100%;
    max-width: calc(100% - 90px);
}
.home section.callout.carousel .item span.button span {
    display: inline-block;
    width: 100%;
    max-width: fit-content;
}
section.callout.carousel .item span[data-modal] {
    cursor: pointer;
}
section.callout.carousel .item a:hover span.button,
section.callout.carousel .item span[data-modal]:hover span.button {
    background-color: var(--color-blue);
    color: var(--color-white);
}

section.callout.carousel .photo img {
    aspect-ratio: 4/3;
    display: block;
    margin: 0;
    object-fit: cover;
    height: 100%;
    width: 100%;
}

section.callout.carousel .dots,
section.callout.carousel .arrows {
    display: none;
}
@media (min-width: 850px) {
    section.callout.carousel .arrows {
        display: grid;
        grid-template-columns: auto auto;
        justify-content: space-between;
        z-index: 2;
    }
    section.callout.carousel .arrows button {
        appearance: none;
        background-color: transparent;
        border: 0 none;
        outline: transparent;
        cursor: pointer;
        padding: 0;
    }
    section.callout.carousel .arrows button.previous {
        margin-left: -10px;
    }
    section.callout.carousel .arrows button.next {
        margin-right: -10px;
    }
    section.callout.carousel .arrows svg {
        width: 100%;
        height: auto;
        max-height: 50px;
        opacity: 1;
    }
    section.callout.carousel .arrows svg path {
        fill: var(--color-blue);
        transition: fill var(--base-speed);
    }
    section.callout.carousel .arrows button:hover svg path {
        fill: var(--color-orange)
    }
    section.callout.carousel .dots {
        display: grid;
        grid-template-columns: auto;
        grid-auto-flow: column;
        gap: 10px;
        justify-content: center;
        padding: 20px;
        z-index: 3;
    }
    section.callout.carousel .dots button {
        appearance: none;
        outline: transparent;
        background-color: rgba(0, 0, 0, .5);
        border-radius: 100%;
        border: 0 none;
        height: 20px;
        width: 20px;
        display: block;
        aspect-ratio: 1/1;
        cursor: pointer;
        transition: background-color var(--base-speed);
    }
    section.callout.carousel .dots button:hover {
        background-color: rgba(0, 0, 0, 1);
    }
    section.callout.carousel .dots button.active {
        background-color: var(--color-blue);
    }
}
section.callout.calculation math {
    font-family: var(--font-family);
    math-style: normal;
    width: 100%;
}
section.callout.calculation math > mrow {
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: auto auto 1fr;
    gap: clamp(10px, -2.054rem + 7.143vw, 
  
  
  
  
    
      
    
    
      4.375rem
    
  
);
    align-items: center;
    width: 100%;
}
@media (max-width: 849px) {
    section.callout.calculation math > mrow {
        grid-template-columns: repeat(2, auto);
        justify-content: center;
    }
    section.callout.calculation math > mrow mfrac {
        grid-row: 2;
        grid-column: 1 / span 2;
    }
}
section.callout.calculation math .total,
section.callout.calculation math .equals {
    font-size: 
  
  
  
  
    
      
    
    
      5.3125rem
    
  
;
    line-height: 1 !important;
    color: var(--color-blue);
    font-weight: bold;
}

section.callout.calculation math .equals {
    font-size: 
  
  
  
  
    
      
    
    
      4.0625rem
    
  
;
}
@media (max-width: 849px) {
    section.callout.calculation math .total,
    section.callout.calculation math .equals {
        font-size: 
  
  
  
  
    
      
    
    
      2.8125rem
    
  
;
    }
    section.callout.calculation math .total {
        text-align: right;
        display: block;
    }
    section.callout.calculation math .equals {
        text-align: left;
        display: block;
    }
}
section.callout.calculation math .equals {
    color: var(--color-black);
}

section.callout.calculation math .fraction-top {
    display: grid;
    grid-template-columns: auto;
    grid-auto-flow: column;
    justify-content: space-between;
    gap: 15px;
    align-items: center;
    padding-bottom: 5px;
    width: 100%;
}
@media (max-width: 459px) {
    section.callout.calculation math .fraction-top {
        grid-template-columns: 100%;
        grid-auto-flow: row;
        gap: 0;
    }
}
section.callout.calculation math .bracket {
    font-size: 0;
    border: 2px solid var(--color-black);
    display: block;
}
@media (min-width: 460px) {
    section.callout.calculation math .bracket {
        width: 22px;
        height: 100%;
    }
    section.callout.calculation math .bracket:first-of-type {
        border-right: 0 none;
    }
    section.callout.calculation math .bracket:last-of-type {
        border-left: 0 none;
    }
}
section.callout.calculation math .plus {
    font-size: clamp(
  
  
  
  
    
      
    
    
      1.125rem
    
  
, 0.813rem + 0.833vw, 
  
  
  
  
    
      
    
    
      1.5625rem
    
  
) !important;
    text-align: center;
    line-height: .8;
    padding: 0;
    text-align: center;
    display: block;
}
@media (max-width: 459px) {
    section.callout.calculation math .bracket:first-of-type {
        border-bottom: 0 none;
        height: 22px;
    }
    section.callout.calculation math .bracket:last-of-type {
        border-top: 0 none;
        height: 22px;
    }
    section.callout.calculation math .plus {
        padding: 
  
  
  
  
    
      
    
    
      0.3125rem
    
  
 0;
        display: block;
    }
}
section.callout.calculation math mfrac > * {
    math-style: normal;
}
section.callout.calculation math .item {
    color: var(--color-orange)
    font-weight: bold;
    display: inline;
    font-size: clamp(
  
  
  
  
    
      
    
    
      1.125rem
    
  
, 0.723rem + 1.071vw, 
  
  
  
  
    
      
    
    
      1.6875rem
    
  
) !important;
    
    text-align: center;
    text-wrap: pretty;
}
@media (min-width: 850px) {
    section.callout.calculation math .item.min {
        max-width: min-content;
    }
}

section.callout.calculation math mfrac > .item {
    padding-top: 5px;
    width: auto;
}

section.callout.media .content {
    text-align: left;
    grid-column: 1;
}
section.callout.media figure {
    grid-column: 1;
    margin: 0;
    padding: 0;
}
section.callout.media .inner {
    grid-template-columns: 100%;
    padding-inline: var(--spacing-small);
    
}
section.callout.media figure.overlap-image img {
    width: 100%;
    max-width: 480px;
    height: auto;
    margin-inline: auto;
    display: block;
}
@media (min-width: 850px) {
    section.callout.media figure.overlap-image {
        max-width: fit-content;
    }
    section.callout.media .inner {
        padding-inline: 0;
        grid-template-columns: minmax(var(--base-padding-inline), 1fr)
            minmax(0, calc(var(--base-max-width) - 380px))
            380px
            minmax(var(--base-padding-inline), 1fr);
        
    }
    section.callout.media:has(figure.overlap-image) .inner {
        padding-block: 0;
        row-gap: 0;
    }
    section.callout.media:has(figure.overlap-image) .content {
        grid-column: 2;
        grid-row: 1;
    }
    section.callout.media:has(figure.overlap-image) figure {
        grid-column: 3;
        grid-row: 1 / span 2;
    }
    section.callout.media figure.overlap-image {
        position: relative;
        align-self: end;
    }
    section.callout.media div.image-overlap-break {
        grid-row: 2;
        grid-column: 1 / -1;
        min-height: 155px;
    }
    section.callout.media figure.overlap-image img {
        /* bottom: -245px; */
        position: relative;
        right: calc(-1 * var(--spacing-medium));
        /* position: absolute; */
        width: 380px;
    }
}
@media (min-width: 1024px) {
    section.callout.media .inner {
        padding-inline: 0;
        grid-template-columns: minmax(var(--base-padding-inline), 1fr)
            minmax(0, calc(var(--base-max-width) - 480px))
            480px
            minmax(var(--base-padding-inline), 1fr);
        
    }
    section.callout.media div.image-overlap-break {
        min-height: 195px;
    }
    section.callout.media figure.overlap-image img {
        width: 480px;
    }
}
.home section.callout.simple .content {
    grid-column: 2 / span 12;
}
.home section.callout.simple .buttons {
    display: grid;
    grid-template-columns: auto;
    gap: var(--spacing-small);
    margin-top: var(--spacing-tiny);
}
@media (min-width: 850px) {
    .home section.callout.simple .buttons {
        grid-auto-flow: column;
    }
}
.home section.callout.simple p:not(.heading) {
    text-wrap: balance;
    /* font-size: var(--font-size-large); */
}
.home section.callout.simple:not(.overlap) a.button {
    text-transform: none;
}

section.callout.links.blue.lightmode {
    color: var(--color-blue);
}
section.callout.links ul {
    grid-template-columns: 100%;
    display: grid;
    justify-content: start;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: var(--spacing-tiny);
}
@media (min-width: 850px) {
    section.callout.links ul {
        grid-template-columns: auto;
        grid-auto-flow: column;
        justify-content: center;
        align-items: center;
    }
}
section.callout.links li {
    padding: 0;
    margin: 0;
    position: relative;
    display: grid;
    grid-template-columns: auto;
    grid-auto-flow: column;
    gap: var(--spacing-tiny);
    line-height: 1;
}
@media (min-width: 850px) {
    section.callout.links li {
        align-items: center;
    }
    section.callout.links li:not(:last-child):after {
        content: '';
        background-color: var(--color-blue);
        width: 5px;
        height: 45px;
        transform: skew(-15deg);
    }
}
section.callout.links a:not(.button) {
    font-weight: bold;
    color: var(--color-blue-dark);
}