#banner { background-image: url(/res/img/howitworks/banner.jpg); }
    #banner > x-c > f-ctrls { align-items: center; }
        #banner > x-c > f-ctrls > .learn { font-size: 20px; font-weight: 900; text-transform: uppercase; margin-left: 50px; border-bottom: solid 2px; }

#lifelong-skills { padding: 60px 90px 0; }
    #lifelong-skills > x-h1 { color: #F2246B; font-size: 60px; margin-bottom: 20px; }
    #lifelong-skills > x-c { display: flex; }
        #lifelong-skills > x-c > x-t { flex: 5; position: relative; }
            #lifelong-skills > x-c > x-t > x-t { font-size: 18px; line-height: 2em; }
            #lifelong-skills > x-c > x-t > f-ctrls { margin-top: 30px; }
                #lifelong-skills > x-c > x-t > f-ctrls > a { }
        #lifelong-skills > x-c > x-img { flex: 4; min-width: 0; margin-left: -100px; }
            #lifelong-skills > x-c > x-img > img { width: 100%; padding: 10%; }
        #lifelong-skills > x-c > x-t > x-t > x-h2 { font-size: 24px; font-weight: bold; text-transform: uppercase; margin: 30px 0 10px 0; display: block; }

#cap-img { background: url(/res/img/howitworks/caps.jpg) center/cover; height: 60vw; margin: 60px 0; }

#faq-h { color: #F2246B; font-size: 72px; margin-bottom: 50px; text-align: center; }
#faq-w { display: flex; padding: 0 90px 120px; }
    #faq-w > x-img { margin-right: 55px; }

x-faq { margin-bottom: 25px; display: block; }
    x-faq > x-h { background: #EDEEF1; border: solid 1px #B7B9C7; display: flex; height: 55px; align-items: center; font-size: 18px; font-weight: bold; padding: 0 30px; cursor: pointer; justify-content: space-between; }
        x-faq > x-h:after { content: 'add'; font-family: 'Material Symbols Outlined'; float: right; display: inline-block; }
    x-faq > x-t { line-height: 1.9em; padding: 20px 30px 5px; }
    x-faq:not(.open) > x-t { display: none; }
    x-faq.open > x-h:after { content: 'remove'; }

@media(max-width:1023px) {
    #banner { background-image: url(/res/img/howitworks/banner-mob.jpg); }
        #banner > x-c > f-ctrls { flex-direction: column; }
            #banner > x-c > f-ctrls > .learn { margin: 20px 0 0; color: #F2246B; font-size: 16px; }
    #lifelong-skills { padding: 20px; text-align: center; }
        #lifelong-skills > x-h1 { font-size: 36px; }
        #lifelong-skills > x-c { flex-direction: column; }
            #lifelong-skills > x-c > x-t > x-t { font-size: 16px; }
                #lifelong-skills > x-c > x-t > x-t > x-h2 { font-size: 18px; }
            #lifelong-skills > x-c > x-img { margin: 0; padding-top: 15%; }
            #lifelong-skills > x-c > x-t > f-ctrls { justify-content: center; }

    #cap-img { margin: 20px 0; }
    #faq-w { flex-direction: column; padding: 20px 20px 0; }
        #faq-w > x-img { order: 2; margin: 40px 0 0; }
            #faq-w > x-img > img { width: 100%; }
        #faq-w x-faq > x-h { height: auto; padding: 10px 20px; }
        #faq-w > x-c > f-ctrls { justify-content: center; }
        #faq-w > x-c > x-h1 { font-size: 36px; margin-bottom: 20px; }
}