/*
 * Hex shape (image):
 * Based on an 6x7 aspect ratio (480w x 560h)
 */

.c-hex-shape {
  display: inline-block;
  position: relative;
}

// Show decorative hexagon beside image when clip-path is supported
.c-hex-shape--ornament {
  @supports (clip-path: inset(50%)) {
    &::before {
      content: '';
      display: block;
      position: absolute;
      bottom: 25%;
      left: 0;
      width: percentage(10/25);
      height: percentage(10/25);
      background: linear-gradient(to top, palette(primary, 700), palette(primary, 500));
      transform: translate(-50%, 50%);
      clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    }

    &[data-pos~="right"] {
      &::before {
        right: 0;
        left: auto;
        transform: translate(50%, 50%);
      }
    }
  }
}

.c-hex-shape__image {
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

.c-hex-shape__image--heart {
  clip-path: polygon(50% 25%, 75% 12.5%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%, 25% 12.5%);
}