.feature-tabs{display:grid;gap:32px;grid-template-columns:1fr;margin-inline:auto;max-width:1200px;@media (min-width:900px){align-items:center;gap:64px;grid-template-columns:minmax(0,1fr) minmax(0,1fr);& .feature-tabs__col--preview{order:1}& .feature-tabs__col--content{order:2;padding-left:40px}}& .feature-tabs__col{min-width:0}& .feature-tabs__col--content{padding-left:32px;@media (max-width:899px){padding-left:0}}& .feature-tabs__eyebrow{color:var(--ft-eyebrow,var(--color-fluent-blue-black));font-size:12px;font-weight:700;letter-spacing:.1em;margin:0 0 12px;text-transform:uppercase}& .feature-tabs__headline{color:var(--ft-headline,var(--color-fluent-blue-black));margin:0 0 32px;text-wrap:pretty}& .feature-tabs__list{list-style:none;margin:0 0 32px;padding:0}& .feature-tabs__item{border-top:1px solid var(--ft-divider,var(--color-gray-blue));margin:0;padding:0;&:first-child{border-top:0}&:last-child{border-bottom:0}}& .feature-tabs__item-btn{background:none;border:0;color:inherit;cursor:pointer;display:block;font:inherit;padding:20px 0;text-align:left;width:100%;@media (max-width:899px){padding-left:28px}}& .feature-tabs__item-head{align-items:center;display:flex;gap:10px;position:relative}& .feature-tabs__item-icon{color:var(--ft-icon,var(--color-fluent-berry));font-size:18px;line-height:1;opacity:0;position:absolute;right:calc(100% + 10px);top:3px;transition:opacity .2s ease;@media (max-width:899px){left:-28px;right:auto}}& .feature-tabs__item-headline{color:var(--ft-headline,var(--color-fluent-blue-black));font-size:22px;font-weight:700;line-height:1.2}& .feature-tabs__item-arrow{align-self:center;color:var(--ft-headline,var(--color-fluent-blue-black));flex:0 0 auto;margin-left:-3px;transition:transform .2s ease,opacity .2s ease}& .feature-tabs__item.is-active .feature-tabs__item-arrow{opacity:.4;transform:translateX(4px)}& .feature-tabs__item-text{color:var(--ft-text,var(--color-gray-dark));display:block;margin-top:0;max-height:0;opacity:0;overflow:hidden;transition:max-height .25s ease,opacity .2s ease,margin-top .2s ease}& .feature-tabs__item-text p{margin:0}& .feature-tabs__item.is-active .feature-tabs__item-icon{opacity:1}& .feature-tabs__item.is-active .feature-tabs__item-text{margin-top:6px;max-height:200px;opacity:1}& .feature-tabs__cta{margin-top:8px}& .feature-tabs__panel{align-items:center;aspect-ratio:1/1;border-radius:24px;display:flex;justify-content:center;max-width:100%;overflow:hidden;position:relative;width:100%;@media (min-width:900px){height:auto;max-width:600px;width:100%}}& .feature-tabs__panel-slide{align-items:center;display:flex;inset:0;justify-content:center;opacity:0;pointer-events:none;position:absolute;transform:scale(.98);transition:opacity .25s ease}& .feature-tabs__panel-slide.is-active{opacity:1;pointer-events:auto;transform:scale(1)}& .feature-tabs__panel-slide img{border-radius:24px;display:block;height:100%;max-width:100%;object-fit:cover;width:100%}}.feature-tabs .feature-tabs__item-image{display:none}@media (max-width:899px){.feature-tabs{& .feature-tabs__col--preview{display:none}& .feature-tabs__item-image{border-radius:16px;display:block;margin:0;max-height:0;opacity:0;overflow:hidden;transition:max-height .3s ease,opacity .2s ease,margin .2s ease,padding .2s ease;& img{border-radius:16px;display:block;height:auto;width:100%}}& .feature-tabs__item.is-active .feature-tabs__item-image{margin:16px 0 20px;max-height:600px;opacity:1}}}