.regulations{
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  
  justify-content: center;
  justify-self: center;
  justify-items: center;
  align-items: center;
  align-content: center;
  
  color: var(--triad3);
  background: linear-gradient( to top, var(--triad2dark), transparent 75%);
  font-family: "Jersey 10 Charted", sans-serif;
  font-weight: 400;
}

.regulations .the-most-left-grid-element{ justify-self: start; }
.regulations .the-most-right-grid-element{ justify-self: end; }

.regulations a{
  color: var(--triad2);
  position: relative;
  display: inline-block;
}

.regulations a::after {
  position: absolute;
  bottom: 100%; /* Position the tooltip above the element */
  left: 50%;
  
  background-color: var(--triad2dark); /* Background color of the tooltip */
  color: var(--triad2); /* Text color of the tooltip */
  font-family: "Teko", sans-serif;
  font-weight: 700;
  
  content: attr(data-title); /* Use a custom attribute for the tooltip text */
  filter:
  drop-shadow(0px 0px 0.75vw var(--triad1))
  drop-shadow(0px 0px 0.75vw var(--triad1))
  drop-shadow(0px 0px 0.75vw var(--triad1))
  !important;
  opacity: 0;
  visibility: hidden;
  white-space: nowrap;
  transition: opacity var(--transition-time), visibility var(--transition-time);
}
 
.regulations a:hover::after {
  opacity: 1;
  visibility: visible;
  transition-delay: var(--transition-delay);
}