:root {
    --columns-with-icon-icon-width: 80px;
    /* --columns-with-icon-column-gap: 90px; /* TODO: Delete after approval */
    --columns-with-icon-column-gap: clamp(var(--content-margin), ((100vw - var(--content-width)) / 2), 90px);
    --columns-with-icon-row-gap: 70px;
}
section.columns-with-icons {
    position: relative;
    overflow: hidden;
}
section.columns-with-icons .section-bkgd {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -100;
    background-color: var(--color-blue-brand-light);
}
section.columns-with-icons .section-content {
    width: var(--content-width);
    margin: 0 auto;
    /* padding: 70px 32px 100px 32px; /* Very early dev value; TODO: Delete after approval */
    padding: 70px 0 100px 0;
}
section.columns-with-icons .section-content * {
    color: #fff;
}
section.columns-with-icons .section-content .section-content-heading {
    margin: 0 0 70px 0;
}
section.columns-with-icons .section-content .row {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--columns-with-icon-row-gap) var(--columns-with-icon-column-gap);
}
section.columns-with-icons .section-content .row .col {
    width: calc((100% - (var(--columns-with-icon-column-gap) * 2)) / 3); /* Defaults to 3 columns, but overriden in module HTML style block  */
    flex: 0 0 auto;
}
section.columns-with-icons .icon {
    width: auto;
    height: var(--columns-with-icon-icon-width);
    margin: 0 0 1em 0;
}
section.columns-with-icons .icon.unassigned {
    border: 2px dotted #ccc;
    border-radius: 15px;
}
section.columns-with-icons h3 {
    margin-bottom: 0.5em;
}
section.columns-with-icons .col-text {
    font-size: 1rem;
}

@media only screen and (max-width: 880px) {
    section.columns-with-icons .section-content .row {
        flex-direction: column;
    }
    section.columns-with-icons .section-content .row .col { /* This rule will actually be overriden by a rule with a more-specified selector in module HTML style block */
        width: 100%;
    }
}