/* Legacy v.3 compatibility */
.infographic.light-shade {
    background-color: var(--brand-light-background-alt);
}

.infographic.default .background-yes {
    background-color: var(--brand-background-shade);
}

.infographic.light .background-yes,
.infographic.light-01 .background-yes {
    background-color: var(--brand-light-background-shade);
}

.infographic.light-alt .background-yes,
.infographic.light-alt-01 .background-yes,
.infographic.light-shade .background-yes {
    background-color: var(--brand-light-background-alt-shade);
}

.infographic.dark .background-yes {
    background-color: var(--brand-dark-background-shade);
}

.infographic.dark-alt .background-yes {
    background-color: var(--brand-dark-background-alt-shade);
}


.home-page .infographic > div {
    max-width: 140.8rem;
    margin-left: auto;
    margin-right: auto;
}

.infographic.col-1 > div {
    padding: 2.4rem;
}

.infographic.col-1.default > div {
    padding-left: 0;
}

.infographic.col-1.default.infographic-highlight > div {
    padding-left: 2.4rem;
}

.infographic.col-2 > div {
    display: grid;
    gap: var(--spacing-6);
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    padding: 2.4rem;
}

.infographic.dark-alt h2,
.infographic.dark h2,
.infographic.dark-alt h3,
.infographic.dark h3,
.infographic.dark-alt h4,
.infographic.dark h4,
.infographic.dark-alt h5,
.infographic.dark h5 {
    color: #ffffff;
}


.infographic .light h2,
.infographic .light-alt h2,
.infographic .light-shade h2,
.infographic .light h3,
.infographic .light-alt h3,
.infographic .light-shade h3,
.infographic .light h4,
.infographic .light-alt h4,
.infographic .light-shade h4,
.infographic .light h5,
.infographic .light-alt h5,
.infographic .light-shade h5 {
    color: var(--brand-light-text);
}

.infographic .background-yes {
    padding: 2.4rem;
}

.infographic.col-1:not(.infographic-highlight) .light + .inner-container.light {
    padding-left: 0;
}

.infographic.col-1.top-left,
.infographic.col-2.top-left {
    border-top-left-radius: 2.4rem;
}

.infographic.col-1.top-right,
.infographic.col-2.top-right {
    border-top-right-radius: 2.4rem;
}

.infographic.col-1.bottom-right,
.infographic.col-2.bottom-right {
    border-bottom-right-radius: 2.4rem;
}

.infographic.col-1.bottom-left,
.infographic.col-2.bottom-left {
    border-bottom-left-radius: 2.4rem;
}

.infographic.col-1 .inner-container.corners,
.infographic.col-2 .inner-container.corners {
    border-radius: var(--border-radius-md);
}

.infographic > div > div > p,
.infographic > div > div > ul:last-child {
    margin-bottom: 2.4rem;
}

.inner-container .key-data > h3,
.inner-container .key-data > h4,
.inner-container .key-data > h5 {
    margin-bottom: 0;
}

/*
div:not(.home-page) .infographic.col-1 .container > div:has(h2,h3,h4,p) + div {
    margin-top: 2.4rem;
}
*/

div:not(.home-page) .infographic.infographic-highlight {
    border-left: 0.4rem solid var(--brand-secondary);
}

.home-page .infographic.infographic-highlight .container > div {
    border-left: 0.4rem solid var(--brand-secondary);
    padding-left: 2.4rem;
}

.home-page .infographic.infographic-highlight .container > div {
    padding-top: var(--spacing-6);
    margin-top: 0;
}

@media (min-width: 1000px) {
    .home-page .infographic.infographic-highlight .container > div {
        padding-top: var(--spacing-7);
        margin-top: 0;
    }
}

.infographic .background-no {
    padding-top: 0 !important;
}

.infographic-listing .key-data {
    display: flex;
    flex-direction: column;
}

.infographic-listing .key-data h3 {
    flex-shrink: 0;
}

.infographic-listing > div {
    padding: 1.2rem 0;
    position: relative;
}

.infographic-listing.card-icons.card-icons-left > div {
    padding: 1.2rem 0 1.2rem 60px;
    position: relative;
}

.infographic-listing.card-icons.card-icons-left.card-icon-border > div {
    padding: 1.2rem 0 1.2rem 108px;
}

.infographic-listing.card-icons.card-icons-left .infographic-item span.icon-image,
.infographic-listing.card-icons.card-icons-left .infographic-item span.icon {
    position: absolute;
    width: 36px;
    height: 36px;
    display: block;
    text-align: center;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}

.infographic-listing.card-icons.icon-small .infographic-item span.icon-image,
.infographic-listing.card-icons.icon-small .infographic-item span.icon {
    width: 28px;
    height: 28px;
}

.infographic-listing.card-icons:not(.card-icons-left) .icon-image,
.infographic-listing.card-icons:not(.card-icons-left) .icon {
    margin-bottom: 12px;
}
.infographic-listing.card-icons.card-icon-border .infographic-item span.icon-image,
.infographic-listing.card-icons.card-icon-border .infographic-item span.icon {
    width: 72px;
    height: 72px;
}

.infographic-listing.card-icons .infographic-item span.icon::before,
.infographic-listing.card-icons .infographic-item span.icon::after {
    font-size: 36px;
    width: 36px;
    height: 36px;
    line-height: 36px;
    display: block;
    text-align: center;
}

.infographic-listing.card-icons.icon-small .infographic-item span.icon::before,
.infographic-listing.card-icons.icon-small .infographic-item span.icon::after {
    font-size: 28px;
    width: 28px;
    height: 28px;
    line-height: 28px;
}

@media (min-width: 420px) {
    .infographic-listing.card-icons .infographic-item {
        min-height: 100px;
        display: flex;
    }
    .infographic-listing.card-icons .infographic-item span.icon,
    .infographic-listing.card-icons .infographic-item span.icon-image {
        width: 60px;
        margin-top: 7px;
    }

    .infographic-listing.card-icons .infographic-item .key-data {
        width: calc(100% - 60px);
    }

    .infographic-listing.card-icons.card-icon-border .infographic-item span.icon,
    .infographic-listing.card-icons.card-icon-border .infographic-item span.icon-image {
        width: 90px;
    }

    .infographic-listing.card-icons.card-icon-border .infographic-item .key-data {
        width: calc(100% - 90px);
    }
}

.infographic-listing.card-icons.card-icon-border .infographic-item span.icon::before,
.infographic-listing.card-icons.card-icon-border .infographic-item span.icon::after {
    width: 72px;
    height: 72px;
    line-height: 72px;
    border: 1px solid var(--brand-secondary);
    border-radius: 50%;
}

.infographic-listing.card-icons.card-icon-border .infographic-item span.icon-image {
/*
    border: 1px solid var(--brand-secondary);
    border-radius: 50%;
*/
    padding: 18px;
}

.infographic-listing.card-icons.card-icon-border.icon-small .infographic-item span.icon-image {
    border: 1px solid var(--brand-secondary);
    border-radius: 50%;  
    padding: 22px;
}

.infographic-listing.card-icons .infographic-item span.icon-image::before {
    content: "";
    font-size: 36px;
    width: 36px;
    height: 36px;
    display: block;
}

.infographic-listing.card-icons.icon-small .infographic-item span.icon-image::before {
    font-size: 28px;
    width: 28px;
    height: 28px;
}

@media (min-width: 1000px) {
    .infographic.col-1 .infographic-listing:not(.card-icons) .card-inner {
        display: flex;
        gap: 2.4rem;
        align-items: center;
    }    
    .infographic.col-2 {
        gap: var(--spacing-7);
    }
}

@media only screen and (min-width: 750px) {
    .infographic-listing {
        gap: var(--spacing-4);
    }
}