.tooltip-content {
    position: absolute;
    display: none;
    background-color: #fff;
    border: 1px solid #ccc;
    padding: 10px;
    box-shadow:
        0 1px 1px hsl(0deg 0% 0% / 0.075),
        0 2px 2px hsl(0deg 0% 0% / 0.075),
        0 4px 4px hsl(0deg 0% 0% / 0.075),
        0 8px 8px hsl(0deg 0% 0% / 0.075),
        0 16px 16px hsl(0deg 0% 0% / 0.075);
    z-index: 1000; /* Ensure the tooltip appears above other content */
}

.tooltip-content img {
    max-width: 750px; /* Ensure the tooltip image doesn't exceed the viewport width */
    height: auto;    /* Maintain aspect ratio */
    display: block;
}

/* Style for figure links */
a.figure-tooltip {
    position: relative;
    font-weight: 600;
    padding-left: 20px; /* Space for the icon */
    display: inline-block; /* Ensure the link and icon stay together */
}

a.figure-tooltip::before {
    content: "\f03e"; /* Font Awesome image icon */
    font-family: 'Font Awesome 5 Free'; /* Ensure correct Font Awesome font */
    font-weight: 900; /* Use the solid style */
    position: absolute;
    left: 0;
    top: 55%;
    transform: translateY(-50%); /* Adjust vertical alignment */
    font-size: 16px; /* Adjust icon size */
    color: #2E7E74; /* Match the icon color to the link color */
    display: inline-block; /* Ensure the icon stays inline with the text */
    width: 20px; /* Ensure enough space for the icon */
}

/* Arrow pointer */
.tooltip-content::after {
    content: "";
    position: absolute;
    bottom: -10px; /* Adjust based on arrow size */
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #2E7E74;
}