$bg:#fff;$text:#7288a2;$gray:#4d5974;$lightgray:#e5e5e5;$blue:#03b5d2;*{box-sizing:border-box;&::before,&::after{box-sizing:border-box}}.faq-container{margin:0 auto;padding:2rem 0}.faq-accordion{.accordion-item{border-bottom:1px solid $lightgray;button[aria-expanded='true']{border-bottom:1px solid $blue}}button{position:relative;display:block;text-align:left;width:100%;padding:1em 0;color:$text;font-size:1.25rem;font-weight:400;border:none;background:none;outline:none;&:hover,&:focus{cursor:pointer;color:$blue;&::after{cursor:pointer;color:$blue;border:1px solid $blue}}.accordion-title{padding:1em 1em 1em 0;padding-left:30px}.icon{display:inline-block;position:absolute;top:24px;left:2px;width:22px;height:22px;border:1px solid;border-radius:22px;&::before{display:block;position:absolute;content:'';top:9px;left:5px;width:10px;height:2px;background:currentColor}&::after{display:block;position:absolute;content:'';top:5px;left:9px;width:2px;height:10px;background:currentColor}}}button[aria-expanded='true']{color:$blue;.icon{&::after{width:0}}+.accordion-content{opacity:1;max-height:35em;transition:all 200ms linear;will-change:opacity,max-height}}.accordion-content{opacity:0;max-height:0;overflow:hidden;transition:opacity 200ms linear,max-height 200ms linear;will-change:opacity,max-height;p{font-size:1.1rem;font-weight:500;padding-left:30px;color:#000}}}