/* Topic banner listings, ported from the Fragment Webflow template (ui-kit/listings, topics-1).
   Classes prefixed ftl-. Two blocks of two banners; .ftl-block-a / .ftl-block-b carry the
   block backgrounds (both the original #efeff5 for now — flip to yellow / black later here).
   Same em-on-.75vw sizing system as the other Fragment ports. */

.ftl-section{z-index:1;background-color:#efeff5;width:100%;position:relative;overflow:hidden;font-family:Manrope,"Manrope Variable",sans-serif;font-size:.75vw;font-weight:400;line-height:1.2em}
.ftl-block-a{background-color:#0A0A0A}
.ftl-block-a .ftl-color-bg{background-color:#0A0A0A}
.ftl-block-b{background-color:#FFE600}
.ftl-block-b .ftl-color-bg{background-color:#FFE600}
.ftl-padding{z-index:10;width:100%;padding-top:10em;padding-bottom:10em;position:relative}
.ftl-container{z-index:20;width:90%;max-width:1440px;margin-left:auto;margin-right:auto;position:relative}
.ftl-list{grid-row-gap:2.25em;gap:2.25em;flex-direction:column;justify-content:space-between;align-items:stretch;width:100%;display:flex}

.ftl-topic{flex-direction:column;justify-content:center;align-items:center;width:100%;display:flex}
.ftl-link{border-radius:5px;color:#ffffffbf;text-align:center;text-decoration:none;flex-direction:column;justify-content:center;align-items:center;width:100%;padding:10em 4em;transition:padding .6s cubic-bezier(.075,.82,.165,1),color .2s;display:flex;position:relative;overflow:hidden}
.ftl-link:hover{color:#fff;padding-top:12em;padding-bottom:12em}
.ftl-title{z-index:10;font-family:Manrope,"Manrope Variable",sans-serif;text-transform:none;letter-spacing:-.0225em;margin:0;color:inherit;font-size:5em;font-weight:700;line-height:1.2em;position:relative}

.ftl-bg{z-index:1;position:absolute;inset:0%}
.ftl-bg-overlay{z-index:5;background-image:linear-gradient(to bottom,#1f1e26,#1f1e2666);mix-blend-mode:multiply;position:absolute;inset:0%}
.ftl-image-3d-parallax{z-index:1;position:absolute;inset:0%}
.ftl-3d-block{z-index:1;perspective:10000px;flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:absolute;inset:0%;overflow:hidden}
.ftl-3d-trigger{flex-direction:column;justify-content:center;align-items:center;width:110%;height:108%;display:flex;position:absolute;inset:auto}
.ftl-anim-trigger{z-index:10;flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:absolute;overflow:hidden}
.ftl-parallax{z-index:1;flex-direction:column;justify-content:center;align-items:center;display:flex;position:absolute;inset:0%}
.ftl-color-bg{z-index:15;background-color:#efeff5;width:100%;height:100%;display:block;position:absolute}
.ftl-cover{z-index:1;object-fit:cover;width:100%;height:120%;top:auto;bottom:auto;position:absolute;display:none}

.ftl-label{z-index:20;opacity:.7;border-bottom:1px solid #fff0;padding-top:.2em;padding-bottom:.2em;transition:border-color .2s,opacity .2s;position:absolute;inset:3em auto auto 3em}
.ftl-label:hover{opacity:1;border-bottom-color:#ffffff80}
.ftl-label.ftl-label-2nd{grid-column-gap:.5em;gap:.5em;justify-content:center;align-items:center;display:flex;left:auto;right:3em}
.ftl-label-text{color:#fff;font-family:Manrope,"Manrope Variable",sans-serif;letter-spacing:.1em;text-transform:uppercase;margin:0;font-size:.9em;font-weight:600;line-height:1.2em}
.ftl-icon{z-index:10;object-fit:contain;flex:none;width:1em;height:1em;font-size:1.5em;position:relative}

@media screen and (min-width:1440px){
.ftl-section{font-size:11px}
}
@media screen and (min-width:1920px){
.ftl-section{font-size:13px}
}
@media screen and (max-width:991px){
.ftl-section{font-size:11px}
.ftl-title{font-size:4.5em;line-height:1.4em}
.ftl-link:hover{padding-top:10em;padding-bottom:10em}
}
@media screen and (max-width:767px){
.ftl-title{font-size:3.5em}
}
@media screen and (max-width:479px){
.ftl-title{font-size:3em}
}