.media_cut {
  container-type: inline-size;
  --media_cut_slant: 7%;
  position: relative;
  display: block;
  overflow: clip;
  clip-path: polygon(var(--media_cut_slant) 0, 100% 0, calc(100% - var(--media_cut_slant)) 100%, 0 100%);
}
@media (max-width: 759px) {
  .media_cut {
    --media_cut_slant: 4.5%;
  }
}
.media_cut > :is(.media, picture, img, video, .video, .slider) {
  display: block;
  width: 100%;
  border-radius: 0;
}
.media_cut > :is(picture, img) {
  height: auto;
}
.media_cut:where([data-cut=start], .media_cut_start) {
  clip-path: polygon(var(--media_cut_slant) 0, 100% 0, 100% 100%, 0 100%);
}
.media_cut:where([data-cut=end], .media_cut_end) {
  clip-path: polygon(0 0, 100% 0, calc(100% - var(--media_cut_slant)) 100%, 0 100%);
}
.media_cut:where([data-direction=backward], .media_cut_backward) {
  clip-path: polygon(0 0, calc(100% - var(--media_cut_slant)) 0, 100% 100%, var(--media_cut_slant) 100%);
}
.media_cut:where([data-direction=backward], .media_cut_backward):where([data-cut=start], .media_cut_start) {
  clip-path: polygon(0 0, 100% 0, 100% 100%, var(--media_cut_slant) 100%);
}
.media_cut:where([data-direction=backward], .media_cut_backward):where([data-cut=end], .media_cut_end) {
  clip-path: polygon(0 0, calc(100% - var(--media_cut_slant)) 0, 100% 100%, 0 100%);
}