@media (width >= 1024px) {
  [data-tooltip-trigger='true'] .tooltip-content {
    bottom: 100%;
    margin-bottom: 0.5rem;
  }
}

@media (width < 1024px) {
  [data-tooltip-trigger='true'] .tooltip-content {
    bottom: auto;
    top: 0;
    transform: translatex(var(--tooltip-translate-x, -250px));
  }
}

@media (width < 768px) {
  [data-tooltip-trigger='true'] .tooltip-content {
    bottom: auto;
    max-width: 330px;
    top: -4rem;
  }
}