.section-ribbon{position:relative;width:100%;overflow:visible}.section-ribbon--white{background:#ffffff}.section-ribbon--slate{background:#f8fafc}.section-ribbon--dark{background:#0f172a}.section-ribbon--left:before{content:"";position:absolute;top:-3px;left:0;width:40%;height:6px;background:#f5480a;z-index:10;pointer-events:none;transform:translateX(-100%) skewX(15deg);transform-origin:top left;opacity:0;transition:none}.section-ribbon--left.section-ribbon--visible:before{transform:translateX(0) skewX(15deg);opacity:1;transition:transform .6s ease-out,opacity .4s ease-out}.section-ribbon--right:before{content:"";position:absolute;top:-3px;right:0;width:40%;height:6px;background:#f5480a;z-index:10;pointer-events:none;transform:translateX(100%) skewX(-15deg);transform-origin:top right;opacity:0;transition:none}.section-ribbon--right.section-ribbon--visible:before{transform:translateX(0) skewX(-15deg);opacity:1;transition:transform .6s ease-out,opacity .4s ease-out}@media (max-width:1024px){.section-ribbon--left:before,.section-ribbon--right:before{height:5px;width:45%;top:-2px}}@media (max-width:768px){.section-ribbon--left:before,.section-ribbon--right:before{height:4px;width:50%;top:-2px}}@media (max-width:480px){.section-ribbon--left:before,.section-ribbon--right:before{height:4px;width:55%;top:-2px}}