/* Album List CSS */

.flex-container {
    display: flex;
    gap: 0;
    max-width: 500px;
    margin: 0 auto;
}

#album-grid {
    display: grid;
    gap: 1rem; /* The space between each album cover */
    grid-template-columns: repeat(3, 1fr); /* Default to 3 columns */
}

.album-card {
    position: relative; /* This is crucial for positioning the images inside */
    aspect-ratio: 1 / 1; /* Makes the div a perfect square */
    width: 100%;
    cursor: pointer;
    overflow: hidden; /* Hides the part of the record that is outside the card */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Styles for the vinyl record image */
.vinyl-record {
    position: absolute;
    left: 50%; /* Center horizontally */
    top: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
    /* Start position: centered horizontally, and moved up 90% of its height */
    transform: translate(-50%, 20%);
    /* This makes the movement smooth */
    transition: transform 0.5s ease-in-out;
}

/* Styles for the album sleeve image */
.album-sleeve {
    position: relative; /* Sits in the normal flow, behind the absolute record */
    height: 100%;
    width: 100%;
    object-fit: cover;
    transition: transform 0.5s ease-in-out;
    filter: sepia(0.4) contrast(0.9) brightness(1.1);
}

/* * THE ANIMATION
 * When you hover over the .album-card, the styles for the images inside it change.
*/
.album-card:hover .vinyl-record {
    /* End position: centered horizontally, and moved down to -45% */
    transform: translate(-50%, 0%);
}

.album-card:hover .album-sleeve {
    /* The sleeve moves down by 10% of its height */
    transform: translateY(25%);
    filter: none;
}

.rating {
    display: flex;
    justify-content: left;
    padding-left: 20px;
    align-items: center;
}

.gray-star {
    font-size: 1.5em;
    color: #808080;
}

.yellow-star {
    font-size: 1.5em;
    color: #B4F8C8;
}

.album-column {
    flex: 1;
    padding: 10px 0 0 0;
    align-content: center;
    height: 200px;
    width: 200px;
}

.info-column {
    flex: 2;
    align-content: center;
    width: auto;
}

.album-column img {
    width: 200px;
    height: 200px;
}

.review {
    padding: 5px 0 0 0;
    max-width: 500px;
    margin: 0 auto;
}