/* Wrapper for Vertical Layout */
.wrapper {
    display: flex;
    flex-direction: column; /* Stack items vertically */
    align-items: center;    /* Center content horizontally */
    margin-top: 4rem;
    margin-left: auto;      /* Center the wrapper horizontally */
    margin-right: auto;     /* Center the wrapper horizontally */
    padding: 0 1rem;        /* Add padding for spacing on smaller screens */
    max-width: 90%;         /* Limit the maximum width */
    row-gap: 40px;          /* Space between items */
}

/* Thumbnail Content */
.home-thumbnail-content {
    width: 100%;
    color: black;
    font-size: 1.3rem;
    border-radius: 4px;
    display: flex;
    flex-direction: column; /* Stack the image and text vertically */
    align-items: center;    /* Center content horizontally */
    text-align: center;     /* Center text */
}

/* Thumbnail Image */
.home-thumbnail-content img {
    width: 512px;           /* Fixed width */
    max-width: 100%;        /* Ensure it doesn't exceed the parent container */
    height: auto;           /* Maintain aspect ratio */
    object-fit: cover;
    border-radius: 25px;    /* Adds rounded corners */
    transition: transform 0.5s; /* Smooth hover effect */
}

/* Hover Effect for Image */
.home-thumbnail-content:hover img {
    border: 5px solid #a76bcf;
    opacity: 0.9;
    transform: scale(1.025);
}

/* Text Block Below Image */
.home-thumbnail-text {
    font-size: 1.2rem; /* Use relative units */
    color: #a76bcf;
    justify-content: center;
    text-align: center;
    margin-top: 10px; /* Adds space between the image and text */
}

/* Change text color on hover of text or image */
.home-thumbnail-content:hover .home-thumbnail-text,
.home-thumbnail-text:hover {
    color: white;
}

/* Responsive Adjustments for Smaller Screens */
@media (max-width: 1200px) {
    .home-thumbnail-text {
        font-size: 1.4rem; /* Slightly larger text for readability */
    }

    .wrapper {
        margin-left: auto;
        margin-right: auto;
        max-width: 100%; /* Adjust wrapper width */
    }
}

@media (max-width: 600px) {
    .home-thumbnail-text {
        font-size: 1.2rem; /* Adjust font size for smaller screens */
    }

    .wrapper {
        padding: 0 0.5rem; /* Add padding to prevent content overflow */
        max-width: 95%;    /* Use most of the viewport width */
    }
}