/* Custom styles to override the existing thumbnail layout */

/* Center the Buy Now button properly */
.text-center {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.text-center a {
    display: inline-block;
    text-align: center;
}

/* Make thumbnails flow from left to right with 3 per row */
.thumbnails {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin: 0 0 2em -2em;
}

/* Change the div containers inside thumbnails */
.thumbnails > div {
    display: block; /* Change from flex to block */
    width: 100%; /* Make each div take full width */
    padding-left: 2em;
}

/* Style the thumbnail links */
.thumbnails a {
    display: inline-block;
    width: 31%; /* Approximately 1/3 width with some spacing */
    margin: 0 1% 2em 1%;
    vertical-align: top;
}

/* Adjust for smaller screens */
@media screen and (max-width: 768px) {
    .thumbnails a {
        width: 48%; /* 2 per row on medium screens */
        margin: 0 1% 2em 1%;
    }
}

@media screen and (max-width: 480px) {
    .thumbnails a {
        width: 100%; /* 1 per row on small screens */
        margin: 0 0 2em 0;
    }
}