.animated-link-container {
    display: flex; /* Use flexbox to align items */
    align-items: center;
    position: relative; /* For positioning of the absolute left icon */
}

.animated-link-text-and-right-icon-container {
    display: inline-flex;
    align-items: center;
    margin: 0; /* Remove any default margins */
    font-size: 1em;
    font-weight: 600;
    opacity: .85;
    transition: transform 0.3s ease; /* Smooth transition for the child div */
    position: relative;
    gap: 0.5em;
}

.animated-link-icon-left {
    position: absolute; /* Make the left icon absolutely positioned */
    left: -32px; /* Positioned at -32px from the left edge of parent */
    opacity: 0; /* Hidden by default */
    transition: transform 0.3s ease, opacity 0.3s ease; /* Smooth transition for animation */
}

.animated-link-icon-right {
    transition: transform 0.3s ease, opacity 0.3s ease; /* Smooth transition for animation */
}

/* Apply animations only for screens with a minimum width of 1280px */
@media (min-width: 1280px) {
    .animated-link-container:hover .animated-link-icon-left {
        opacity: 1; /* Appear on hover */
        transform: translateX(32px); /* Move into its normal position */
    }

    .animated-link-container:hover .animated-link-text-and-right-icon-container {
        transform: translateX(32px); /* Slide the child div 32px to the right */
    }

    .animated-link-container:hover .animated-link-icon-right {
        opacity: 0; /* Fade out */
    }
}