ul.list-disc li {
    list-style: disc;
}

.banner-image {
    height: 100%;
    object-fit: cover;
}

/**
 * >>>>>>>>>>>>>>>>>
 * Title Decoration
 * >>>>>>>>>>>>>>>>> 
 */
.fancy {
    position: relative;
    white-space: nowrap;
    
    &:after {
      --deco-height: 0.3425em;
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: calc(var(--deco-height) * -1.02);
      height: var(--deco-height);
      background-image: url("data:image/svg+xml,%3Csvg width='100' height='64' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath d='M-15 30.5C-1 22 72-4 54 13 37.9 28.2-2.5 57.5 16 55.5s72-29 104-40' stroke='%2373bef8' stroke-width='9'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h100v64H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
      background-size: auto 100%;
      background-repeat: round;
      background-position: 0em;
    }
  }

/**
 * >>>>>>>>>>>>>>>>>
 * Image Card
 * >>>>>>>>>>>>>>>>> 
 */
/* HTML: <div class="ribbon">Your text content</div> */
  .ribbon {
    --c: #0091ff;
    
    padding: .6em 1.3em; /* you may need to adjust this based on your content */
    aspect-ratio: 1;
    display: grid;
    place-content: center;
    text-align: center;
    position: relative;
    z-index: 0;
    width: fit-content;
    box-sizing: border-box;
  }
  .ribbon:before {
    content:"";
    position: absolute;
    z-index: -1;
    inset: 50% 0 auto;
    aspect-ratio: 1;
    background: color-mix(in srgb, var(--c), #000 35%);
    clip-path: polygon(calc(100%/3) 0,calc(200%/3) 0,100% 90%,80% 85%,calc(200%/3) 100%,calc(100%/3) 0,calc(200%/3) 0,calc(100%/3) 100%,20% 85%,0 90%);
  }
  .ribbon:after {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    background: radial-gradient(35% 35%,#0000 96%,#0003 97% 99%,#0000) var(--c);
    clip-path: polygon(100.00% 50.00%,89.23% 57.80%,96.19% 69.13%,83.26% 72.22%,85.36% 85.36%,72.22% 83.26%,69.13% 96.19%,57.80% 89.23%,50.00% 100.00%,42.20% 89.23%,30.87% 96.19%,27.78% 83.26%,14.64% 85.36%,16.74% 72.22%,3.81% 69.13%,10.77% 57.80%,0.00% 50.00%,10.77% 42.20%,3.81% 30.87%,16.74% 27.78%,14.64% 14.64%,27.78% 16.74%,30.87% 3.81%,42.20% 10.77%,50.00% 0.00%,57.80% 10.77%,69.13% 3.81%,72.22% 16.74%,85.36% 14.64%,83.26% 27.78%,96.19% 30.87%,89.23% 42.20%); /* from https://css-generators.com/starburst-shape/ */
  }