.listing-container{
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 80vh;
}

h1 {
    color: white;
}

a{
    text-decoration: none;
    color: white
}

a:hover{
    color: #1b1b1b;
}

p {
    color: white;
}
#main-image{
    border-radius: 1%;
}

.image-thumbnails .col-4 {
    margin-top: 1rem;
    margin-right: 1rem;
    display: flex;
    align-items: center;  /* Add this to center vertically */
    justify-content: center; /* Add this to center horizontally */
}

#main-image-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

#main-image, .image-thumbnails .col-4 img {
    max-width: 100%;
    max-height: 60vh;
    border: none;
}



/* Responsive adjustments */
@media screen and (max-width: 576px) {
    /* New rules for extra small (mobile) screens */
    .listing-container{
        height: auto;
        margin-top: 1rem;/* Full viewport height might be too much for mobile, setting to auto for content height */
    }

    .image-thumbnails {
        justify-content: center; /* Center thumbnails for mobile screens */
    }

    #main-image, .image-thumbnails .col-4 img {
        max-height: 30vh; /* Reduce the image height for mobile screens */
    }

    .image-thumbnails .col-4 {
        margin-top: 1rem; /* Reduce margins for mobile screens */
        margin-right: 0.5rem;
    }

    .listing-details{
        margin-top: 1rem;
    }

    .details-title{
        text-align: center;
    }
    .details-details{
        margin-left: 10vw;
        margin-right: 10vw;
    }
}