/* Add your custom CSS here */

.section-selector-1 { background-color: var(--lime-400) }

.section-selector-1.cols-2-half .col-2 h2 {
    font-family: 'Saira Condensed', sans-serif;
    letter-spacing: 1px;
    font-size: calc(28px + (42 - 28) * ((100vw - 320px) / (1140 - 320)));
    margin-top: 32px;
    margin-bottom: 0;
}

.section-selector-2 { font-family: 'Playfair Display', serif }
.section-selector-2 .col-1 h2 { font-size: var(--font-size-xxl)}
.section-selector-2 .col-3 p { font-family: 'Arial'}

.section-selector-3.theme-dark { background-color: var(--trend-800) }
.section-selector-3 .col-1 h2 { color: var(--sky-300); font-size: xx-large; }
.section-selector-3 .col-1 h3 { color: var(--slate-200) }
.section-selector-3 .col-3 h3 { color: var(--white-000) }
.section-selector-3 .col-3 p { color: var(--slate-200) }
.section-selector-3 .col-3 li { color: var(--slate-200) }
.section-selector-3.theme-dark .cols-background .col-3 { background-color: var(--trend-700) }
.section-selector-3.theme-dark .cols-shadows .col-3 { box-shadow: rgba(255, 255, 255, 0.2) 14px 14px 14px 0px}
.section-selector-3 div[class^='flex-cols-'] div[class^='col-'] figure.icon { color: var(--sky-300) }
.section-selector-3 {
    background-image: linear-gradient(to top right, #0f172a, #1c2c51);
    font-family: 'Inter', sans-serif;
 }
.section-selector-3 .col-1 h2 { font-weight: 200 }
.section-selector-3 .col-3 h3 { font-weight: 400 }
.section-selector-3 .flex-cols-3 > .col-3 > figure.icon.icon-small i[class^="la"] {
    font-size: 60px;
    margin-bottom: -24px !important;
}
.section-selector-3 .cols-padding div[class^="col-"] figure.icon-left i { margin-left: 16px }
.section-selector-3 div[class^="col-"] figure.icon { margin-bottom: 20px }  
.section-selector-3 .col-1 > h2 {
    font-size: calc(28px + (64 - 28) * ((100vw - 320px) / (1140 - 320)));
}

.section-selector-4 { background-color: var(--green-300) }
.section-selector-4 > h2 span.highlight { color: var(--gray-600) }
.section-selector-4 {
    font-family: 'Inter', sans-serif;
    background-color: #73c9b7;
}
.section-selector-4 > h2 span.highlight {
    color: var(--gray-700);
}

.section-selector-4.w-1140px h2 {
    font-size: calc(22px + (42 - 22) * ((100vw - 320px) / (1140 - 320)));
    line-height: 1.3;
    max-width: 30ch;
}

.section-selector-5 {
    background-color: var(--slate-050);
    font-family: 'Inter', sans-serif;
}

.section-selector-5 .col-1 h2 span.highlight { color: var(--red-600)}
.section-selector-5 h2 {font-size: var(--font-size-xxxl);}

.section-selector-5 .flex-cols-4 > .col-4 > h3 {
	font-size: calc(18px + (56 - 18) * ((100vw - 768px) / (1920 - 768)));
}

.section-selector-6.theme-light .flex-cols-3 .col-3:nth-child(1) {
    background-color: var(--green-200)
}

.section-selector-6.theme-light .flex-cols-3 .col-3:nth-child(2) {
    background-color: var(--blue-200)
}

.section-selector-6.theme-light .flex-cols-3 .col-3:nth-child(3) {
    background-color: var(--red-300)
}

.container {text-align: center; margin-top: -8px; font-size: var(--font-size-md);}
.container p {margin-bottom: 10px;}

footer.theme-light { background-color: var(--slate-050); font-family: 'Arial' }