.hover-scoop,
.hover-notch,
.hover-circle {
  overflow: hidden;
  transition: border-radius 0.5s ease, corner-shape 0.5s ease;
}

.hover-scoop img,
.hover-circle img,
.hover-notch img {
  transition: transform 0.5s ease;
}

.hover-scoop:hover img,
.hover-circle:hover img,
.hover-notch:hover img {
  transform: scale(1.08);
}

.hover-circle:hover {
  border-radius: 50% !important;
}

@supports (corner-shape: scoop) {
  .hover-scoop:hover {
    corner-shape: scoop;
    border-radius: 30% !important;
  }
}

@supports (corner-shape: notch) {
  .hover-notch:hover {
    corner-shape: notch;
    border-radius: 20% !important;
  }
}

.service-hero-grid {
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  background-color: transparent;
  border: none;
  padding-left: 0px;
  background-image: linear-gradient(
    to right,
    rgba(255, 255, 255, 0.15) 70%,
    transparent 70%
  );
  background-size: 12px 3px;
  background-position: left top;
  background-repeat: repeat-x;
  border-left: 3px dashed rgba(255, 255, 255, 0.15);
}

.service-hero-grid > div {
  border: none;
  background-image: linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.15) 70%,
      transparent 70%
    ),
    linear-gradient(to right, rgba(255, 255, 255, 0.15) 70%, transparent 70%);
  background-size: 3px 12px, 12px 3px;
  background-position: right top, left bottom;
  background-repeat: repeat-y, repeat-x;
}