{# Template for a single album list item #}
<style>
    a.album-link { /* Target the link directly */
        display: flex; /* Use flexbox for layout */
        align-items: center; /* Vertically center items */
        gap: 4%; /* Space between image and text (2x) */
        text-decoration: none;
        color: var(--link-color); /* Use variable */
    }

    .album-cover-index {
        max-width: 12%;
        object-fit: cover; /* Ensure image covers the area */
        flex-shrink: 0; /* Prevent image from shrinking */
        border-radius: 4px; /* Slightly rounded corners */
    }

    .album-name-index {
        font-size: 1.6em; /* Match previous link size (2x) */
        font-weight: 500; /* Slightly bolder album name */
        margin-bottom: 0.1em;
    }

    .artist-name-index {
        font-size: 1.3em; /* (2x) */
        font-style: italic;
    }

    .album-list-item {
        margin-bottom: 2em;
    }

    .album-list-item a::after {
        content: none; /* Remove the arrow */
    }

    a.album-link:hover .album-name-index {
        text-decoration: underline; /* Underline album name on hover */
    }
    
    .album-text-info {
        display: flex;
        flex-direction: column; /* Stack album and artist names vertically */
    }
</style>

<li class="album-list-item">
    <a href="{{ page.filename }}" class="album-link">
        <img src="{{ page.cover_path }}" class="album-cover-index">
        <div class="album-text-info">
            <span class="album-name-index">{{ page.album_name }}</span>
            <span class="artist-name-index">{{ page.artist_str }}</span>
        </div>
    </a>
</li>