:root{--diagonal-section-offset:50px}.diagonal-section{position:relative;z-index:1;background-size:cover;background-repeat:no-repeat;background-position:50%}@supports ((-webkit-clip-path:inset(50%)) or (clip-path:inset(50%))){.diagonal-section{position:relative;background-color:transparent;padding-top:calc(var(--diagonal-section-offset)/2);padding-bottom:calc(var(--diagonal-section-offset)/2);&:before{content:"";background-color:#86E4FF;position:absolute;top:-10px;left:0;width:100%;height:calc(100% + 30px);-webkit-clip-path:polygon(0 var(--diagonal-section-offset),100% 0,100% calc(100% - var(--diagonal-section-offset)),0 100%);clip-path:polygon(0 var(--diagonal-section-offset),100% 0,100% calc(100% - var(--diagonal-section-offset)),0 100%)}}}