/* ==========================================================================
   Section: Content Columns
   Layout: content_columns
   Source: pages/securities/figma
   Optional heading + 1/2/3 WYSIWYG columns. Grid stacks below 767px.
   ========================================================================== */

.content-columns {
    padding-top: clamp(48px, calc(26.713px + 2.775vw), 80px);
    padding-bottom: clamp(48px, calc(26.713px + 2.775vw), 80px);
    background-color: var(--color-white);
}

.content-columns-heading {
    font-family: var(--font-heading);
    font-weight: 400;
    font-size: clamp(28px, 3vw, 40px);
    color: var(--color-heading);
    margin: 0 0 clamp(20px, 2.5vw, 32px);
    text-align: left;
}

/* Optional divider between heading and columns, driven by the
   `heading_has_bottom_border` ACF checkbox. */
.content-columns--heading-bordered .content-columns-heading {
    padding-bottom: clamp(20px, 2vw, 37px);
    margin: 0 0 clamp(20px, 2vw, 37px);
    border-bottom: 1px solid var(--color-text-dark);
}

.content-columns-grid {
	display: grid;
	/*gap: clamp(30px, 7vw, 137px);*/
    gap: clamp(30px, calc(-41.333px + 9.288vw), 137px);
	align-items: start;
}

.content-columns--cols-1 .content-columns-grid {
    grid-template-columns: 1fr;
}

.content-columns--cols-2 .content-columns-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.content-columns--cols-3 .content-columns-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.content-columns-col {
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.7;
	color: var(--color-text-dark);
}

.content-columns-col > *:first-child {
    margin-top: 0;
}

.content-columns-col > *:last-child {
    margin-bottom: 0;
}

.content-columns-col p {
    margin: 0 0 26px;
}

.content-columns-col a {
    color: var(--color-brand-navy);
    text-decoration: underline;
}

.content-columns-col ul,
.content-columns-col ol {
    margin: 0 0 16px 1.25em;
    padding: 0;
}

.content-columns-col li + li {
    margin-top: 6px;
}

.content-columns-col ul.ul-column_two {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0 25px;
}
.content-columns-col ul.ul-column_three {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0 25px;
}
.content-columns-col ul.ul-column_two li,
.content-columns-col ul.ul-column_three li{
    margin: 0 0 10px 0;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1200px) {
    .content-columns-col ul.ul-column_three {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 991px) {
    .content-columns--cols-3 .content-columns-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .content-columns--cols-2 .content-columns-grid,
    .content-columns--cols-3 .content-columns-grid {
        grid-template-columns: 1fr;
    }
    .content-columns-col p{
        margin: 0 0 20px;
    }
    .content-columns-grid{
        gap: 20px;
    }
}

@media (max-width: 600px) {
    .content-columns-col ul.ul-column_two,
    .content-columns-col ul.ul-column_three {
        grid-template-columns: repeat(1, 1fr);
    }
}