@use "@/src/assets/scss/variables" as *;
@use "@/src/assets/scss/partial" as *;

.ServiceCardWrapper {
  .ServiceCardContent {
    --r: 24px; /* control the rounded part */
    --s: 53px; /* control the size of the cut */
    --a: 36deg; /* control the depth of the curvature */
    --p: 50%; /* control the position */
    width: 100%;
    height: 100%;
    // background: #ffeeee;
    border: 1px solid #bfbfbf;
    border-radius: var(--r);
    --_m: var(--r), #000 calc(100% - 1px), #0000;
    --_d: (var(--s) + var(--r)) * cos(var(--a));
    mask: radial-gradient(var(--r) at calc(var(--p) + var(--_d)) var(--_m)),
      radial-gradient(var(--r) at calc(var(--p) - var(--_d)) var(--_m)),
      radial-gradient(
          var(--s) at var(--p) calc(-1 * sin(var(--a)) * var(--s)),
          #0000 100%,
          #000 calc(100% + 1px)
        )
        0 calc(var(--r) * (1 - sin(var(--a)))) no-repeat,
      linear-gradient(
        90deg,
        #000 calc(var(--p) - var(--_d)),
        #0000 0 calc(var(--p) + var(--_d)),
        #000 0
      );
      @media (min-width: $xl) {
        --r: 32px;
        --s: 50px;
        --a: 36deg;
      }
      @media (min-width: $xxl) {
        --r: 30px;
        --s: 60px; 
      }
      @media (min-width: $xxxl) {
        --r: 42px;
        --s: 60px;
      }
    &::after {
      content: "";
      position: absolute;
      z-index: -1;
      left: 50%;
      transform: translateX(-50%);
      top: -2px;
      width: 140px;
      height: 51px;
      background-image: url("../../../public/images/service-item-shape.svg");
      background-position: top;
      background-size: contain;
      background-repeat: no-repeat;
      @media (min-width: $xl) {
        width: 142px;
        top: -1px;
      }
      @media (min-width: $xxl) {
        width: 157px;
      }
      @media (min-width: $xxxl) {
        width: 170px;
      }
    }
  }
}