:root { --cut: 6.4rem; } @media (max-width: 768px) { :root { --cut: clamp(1.5rem, 10vw, 3rem); } }  .cut-all { clip-path: polygon( 0 var(--cut), var(--cut) 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, var(--cut) 100%, 0 calc(100% - var(--cut)) ); -webkit-clip-path: polygon( 0 var(--cut), var(--cut) 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, var(--cut) 100%, 0 calc(100% - var(--cut)) ); }   .cut-tl { clip-path: polygon( 0 var(--cut), var(--cut) 0, 100% 0, 100% 100%, 0 100% ); -webkit-clip-path: polygon( 0 var(--cut), var(--cut) 0, 100% 0, 100% 100%, 0 100% ); }  .cut-tr { clip-path: polygon( 0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100% ); -webkit-clip-path: polygon( 0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100% ); }  .cut-br { clip-path: polygon( 0 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100% ); -webkit-clip-path: polygon( 0 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100% ); }  .cut-bl { clip-path: polygon( 0 0, 100% 0, 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)) ); -webkit-clip-path: polygon( 0 0, 100% 0, 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)) ); }   .cut-tl-tr { clip-path: polygon( 0 var(--cut), var(--cut) 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100% ); -webkit-clip-path: polygon( 0 var(--cut), var(--cut) 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100% ); }  .cut-tr-br { clip-path: polygon( 0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100% ); -webkit-clip-path: polygon( 0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100% ); }  .cut-br-bl { clip-path: polygon( 0 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, var(--cut) 100%, 0 calc(100% - var(--cut)) ); -webkit-clip-path: polygon( 0 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, var(--cut) 100%, 0 calc(100% - var(--cut)) ); }  .cut-bl-tl { clip-path: polygon( 0 var(--cut), var(--cut) 0, 100% 0, 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)) ); -webkit-clip-path: polygon( 0 var(--cut), var(--cut) 0, 100% 0, 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)) ); }  .cut-tl-br { clip-path: polygon( 0 var(--cut), var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100% ); -webkit-clip-path: polygon( 0 var(--cut), var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100% ); }  .cut-tr-bl { clip-path: polygon( 0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)) ); -webkit-clip-path: polygon( 0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)) ); }   .cut-tr-br-bl { clip-path: polygon( 0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, var(--cut) 100%, 0 calc(100% - var(--cut)) ); -webkit-clip-path: polygon( 0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, var(--cut) 100%, 0 calc(100% - var(--cut)) ); }  .cut-tl-br-bl { clip-path: polygon( 0 var(--cut), var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, var(--cut) 100%, 0 calc(100% - var(--cut)) ); -webkit-clip-path: polygon( 0 var(--cut), var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, var(--cut) 100%, 0 calc(100% - var(--cut)) ); }  .cut-tl-tr-bl { clip-path: polygon( 0 var(--cut), var(--cut) 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)) ); -webkit-clip-path: polygon( 0 var(--cut), var(--cut) 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)) ); }  .cut-tl-tr-br { clip-path: polygon( 0 var(--cut), var(--cut) 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100% ); -webkit-clip-path: polygon( 0 var(--cut), var(--cut) 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100% ); }