/* HTML: <div class="ribbon">Your text content</div> */
.ribbon {
  font-size: 22px;  
  color: #fff;
}
.ribbon {
  --d: .8em; /* the depth */  
  position: absolute;
  bottom: -1rem;
  inset-inline: calc(-1*var(--d));
  border-top: var(--d) solid #0003;
  clip-path: polygon(0 100%,100% 100%,100% var(--d),calc(100% - var(--d)) 0%,calc(100% - var(--d)) var(--d),var(--d) var(--d),var(--d) 0%,0 var(--d));
}

.ribbon:after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff3;
  -x-content: '';
  transition: background-color 0.3s;
}

a:hover .ribbon:after {
  background: #fff0;
}

.ffl-card {
  background-size: cover;
  padding-top: 70%;
  border-radius: 0.125rem;
  margin-bottom: 1.5rem;
}

.ffl-card img {
  position: absolute;
  top: 0.25rem;
  right: 0.25rem;
  width: 20%;
  height: auto;
}

#pb-1319792316 img {
    border-radius: 0.5rem;
    box-shadow: 1rem 1rem 2rem rgba(0, 0, 0, 0.4);
    margin-bottom: 2rem;
}

@media (min-width: 768px) and (min-height: 768px) {
  :root {
    --total: 10;        /* How many items */
    --radius: 35svh;   /* Circle size */
  }
  .circle-grid {
    position: relative;
    width: 100%;
    height: 90svh;
    animation: expand 1s ease-in-out 1;  
  }
  .circle-col {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 50%;
    width: 15svh;
    height: 15svh;
    margin: -7.5svh;

    filter: drop-shadow(2px 4px 6px #0008);
    
    display: grid;
    place-items: center;

    /* This is where the magic happens */
    --angle: calc(360deg / var(--total) * var(--i) + 15deg);

    transform: 
      rotate(var(--angle))           /* Rotate to position */
      translateX(var(--radius))      /* Move away from center */
      rotate(calc(-1 * var(--angle))); /* Rotate back */
  }
  .circle-col img {
    transition: transform 0.3s;
    transform-origin: 50% 80%;
  }

  .circle-col:hover {
    z-index: 3;
  }
  
  .circle-col:hover img {
    transform: scale(1.2);
  }

  .circle-col .caption {
    position: absolute;
    top: calc(100% - 1rem);
    left: -20%;
    text-align: center;
    font-weight: bold;  
    padding: 0.25rem;
    border-radius: 0.25rem;
    color: #fff;  
    width: 140%;
    opacity: 0.8;
    transition: opacity 0.3s;
    box-shadow: 0.125rem 0.125rem 0.25rem #0004;    
  }

  .circle-col:hover .caption {
    opacity: 1;
  }

  .circle-grid .center {
    font-family: "PT Serif", serif;
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    background: #fff;
    color: #006242;
    border: 2px solid #006242;
    outline: 1px solid #fff;
    text-align: center;
    font-size: 2rem;
    margin: 0;
    display: grid;
    place-items: center;
    width: 20svh;
    height: 20svh;
    transform: translate(-50%,-50%);
    padding: 1rem;
    filter: drop-shadow(2px 4px 6px #0008);
  }

  .circle-bg {
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height: 100%;  
    z-index: 1;
    opacity: 0;
    transition: opacity 0.5s;  
  }

  .circle-col:hover + .circle-bg {
    opacity: 0.5;  
  }

  .circle-bg.c1 {
    background: linear-gradient(to right, #667d4d 20%, #fff0 100%);
  }

  .circle-bg.c2 {
    background: radial-gradient(ellipse at top left, #96374c 20%, #fff0 100%);
  }

  .circle-bg.c3 {
    background: radial-gradient(ellipse at 33% 0%, #af87b6 20%, #fff0 100%);
  }

  .circle-bg.c4 {
    background: radial-gradient(ellipse at 67% 0%, #ef7eb1 20%, #fff0 100%);
  }

  .circle-bg.c5 {
    background: radial-gradient(ellipse at top right, #317883 20%, #fff0 100%);
  }

  .circle-bg.c6 {
    background: linear-gradient(to left, #488ecb 20%, #fff0 100%);
  }

  .circle-bg.c7 {
    background: radial-gradient(ellipse at bottom right, #dd9daf 20%, #fff0 100%);
  }

  .circle-bg.c8 {
    background: radial-gradient(ellipse at 67% 100%, #71c496 20%, #fff0 100%);
  }

  .circle-bg.c9 {
    background: radial-gradient(ellipse at 33% 100%, #d5ae3e 20%, #fff0 100%);
  }

  .circle-bg.c10 {
    background: radial-gradient(ellipse at bottom left, #f58c4b 20%, #fff0 100%);
  }

  @keyframes expand {
    from {
      opacity: 0;
      transform: scale(0);
    }

    to {
      opacity: 1;
      transform: scale(1);
    }
  }
}

@media (max-height: 767px) {
  .circle-row {
    display: none !important;    
    flex-wrap: wrap;
    justify-content: center;
  }
  .card-row {
    display: block !important;
  }
  .circle-col {    
    padding: 0.5rem;
    width: 20%;
  }
  .circle-col .caption {
    border-radius: 0.25rem;
    margin-top: 0.5rem;
    color: #fff;
    padding: 0.125rem;
    text-align: center;
  }
  .circle-grid .center {
    width: 100%;
    font-size: 2rem;
    text-align: center;
    color: var(--secondary);
    margin: 1rem 0;
  }  
}

@media (max-height: 767px) and (min-width: 900px) {
  .circle-col {
    width: 25%;
  }
}

@media (max-width: 768px) {
  .circle-grid {
    display: flex;    
    flex-wrap: wrap;
  }
  .circle-col {
    width: 50%;
    padding: 0.5rem;
  }
  .circle-col .caption {
    border-radius: 0.25rem;
    margin-top: 0.5rem;
    color: #fff;
    padding: 0.125rem;
    text-align: center;
  }
  .circle-grid .center {
    width: 100%;
    font-size: 2rem;
    text-align: center;
    color: var(--secondary);
    margin: 1rem 0;
  }
}