.preview {
  position: relative;
  height: 280px;
  width: 100%;
  background: black;
}

.preview-info__container {
  justify-content: center;
  gap: 20px;

  padding-left: 10px;
  width: 100%;
  max-width: var(--content-width);
  margin: 0 auto;
}

.preview-info__container > h2 {
  max-width: 50%;
}

.preview-image,
.preview-image > img {
  height: 280px;
  max-height: 280px;
}

.preview-image {
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
}

.preview-image > img {
  width: 100%;
  object-fit: cover;
  clip-path: polygon(0 0, 100% 0%, 100% 100%, 35% 100%);
}

@media (max-width: 530px) {
  .preview-image {
    width: 40%;
  }

  .preview-image > img {
    clip-path: polygon(0 0, 100% 0%, 100% 100%, 40% 100%);
  }

  .preview-info__container > h2 {
    max-width: 55%;
  }
}