:root {
  --pg-primary: #7000ff;
  --pg-secondary: #ff6594;
  --pg-accent: #0f0bbf;
}

.pg-aware-grid {
  display: grid;
  padding: 20px;
}
.pg-aware-item {
  position: relative;
  box-shadow: 0.5rem -0.5rem 0 var(--pg-accent), 0 0.5rem 0 transparent,
    -0.5rem -1rem 0 var(--pg-secondary);
}

.pg-aware-title {
  margin: 0;
  align-self: center;
  padding: 0.25em;
  position: relative;
  z-index: 1;
  font-size: 30px;
  text-align: center;
  text-transform: uppercase;
}
.pg-aware-image-wrap {
  .pg-aware-img {
    height: 100%;
    width: 100%;
  }
}

.pg-aware-style-1 {
  @supports (clip-path: circle(25%)) {
    .pg-aware-item:hover .pg-aware-img {
      clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 100% 100%, 0% 100%);
    }

    .pg-aware-img {
      clip-path: polygon(
        18.11% 16.5%,
        50% 0%,
        75% 50%,
        54.09% 90.44%,
        13.7% 63.94%
      );
    }
  }
}

.pg-aware-style-2 {
  @supports (clip-path: circle(25%)) {
    .pg-aware-item:hover .pg-aware-img {
      clip-path: polygon(
        18.11% 16.5%,
        50% 0%,
        75% 50%,
        54.09% 90.44%,
        13.7% 63.94%
      );
    }

    .pg-aware-img {
      clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 100% 100%, 0% 100%);
    }
  }
}

.pg-aware-style-3 {
  @supports (clip-path: circle(25%)) {
    .pg-aware-item:hover .pg-aware-img {
      clip-path: circle(70.7% at 50% 50%);
    }

    .pg-aware-img {
      clip-path: circle(30% at 50% 50%);
    }
  }
}

.pg-aware-style-4 {
  @supports (clip-path: circle(25%)) {
    .pg-aware-item:hover .pg-aware-img {
      clip-path: polygon(
        0% 0%,
        100% 0,
        100% 75%,
        100% 100%,
        75% 100%,
        44% 100%,
        0 100%
      );
    }

    .pg-aware-img {
      clip-path: polygon(
        0% 0%,
        100% 0,
        100% 75%,
        75% 75%,
        75% 100%,
        50% 75%,
        0% 75%
      );
    }
  }
}
.pg-aware-style-5 {
  @supports (clip-path: circle(25%)) {
    .pg-aware-item:hover .pg-aware-img {
      clip-path: polygon(100% 0, 100% 50%, 100% 99%, 0% 100%, 0 50%, 0% 0%);
    }

    .pg-aware-img {
      clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%);
    }
  }
}

@supports (clip-path: circle(25%)) {
  .pg-aware-item {
    clip-path: circle(0%);
    animation: circle-grow 2000ms 450ms forwards;
  }

  .pg-aware-img {
    transition: clip-path 400ms ease-in-out;
  }

  .pg-aware-title {
    clip-path: inset(50% 50%);
    animation: heading-in 400ms 1000ms forwards;
  }
}

@keyframes circle-grow {
  to {
    clip-path: circle(100%);
  }
}

@keyframes heading-in {
  to {
    clip-path: inset(0% 0%);
  }
}

@supports (mix-blend-mode: darken) {
  .pg-aware-item {
    background-image: linear-gradient(
      45deg,
      var(--pg-primary),
      rgba(8, 61, 169, 0.651)
    );
  }
}

@supports (-webkit-text-stroke: 1px black) {
  .pg-aware-title {
    color: #fff;
  }
}

@media screen and (min-width: 25rem) {
  .pg-aware-title::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: 0;
    width: 100%;
    height: 60%;
    clip-path: circle(3% at 95%);
    background: var(--pg-secondary);
    z-index: -1;
    transition: clip-path 400ms ease-in-out;
  }

  .pg-aware-item:hover .pg-aware-title::before {
    clip-path: circle(100%);
  }
}