body {
    background-image: url("Background_Night.webp");
    background-size: cover;
    background-repeat: repeat;
    background-position: center center;
    background-attachment: fixed;
  }

/* Maintain square aspect ratio for grid items */
.quarto-listing-container-grid .quarto-grid-item {
    position: relative;
    width: 100%;
    padding-top: 100%; /* This maintains a 1:1 aspect ratio */
}

/* Ensure the image covers the entire area */
.quarto-listing-container-grid .quarto-grid-item .card-img-top {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Additional styles */
.quarto-listing-container-grid .thumbnail-image {
    border-radius: 10px; /* Adjust the value as needed */
}

.quarto-grid-item .card-body {
    opacity: 0;
    transition: opacity 0.3s ease;
}

.quarto-grid-item:hover .card-body {
    opacity: 1;
}

.quarto-grid-item .thumbnail-image {
    transition: filter 0.3s ease;
}

.quarto-grid-item:hover .thumbnail-image {
    filter: brightness(50%);
}