/* SECTION GALLERY */
.villa section.gallery .card-gallery,
.gallery section.gallery .card-gallery,
.main section.gallery .card-gallery {
    width: 100%;
    position: relative;
    overflow: hidden;
}

.villa section.gallery .card-gallery .gallery-image-wrapper,
.gallery section.gallery .card-gallery .gallery-image-wrapper,
.main section.gallery .card-gallery .gallery-image-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 1/1;
    border-radius: 4px;
}

.villa section.gallery .card-gallery .gallery-image-wrapper:before,
.gallery section.gallery .card-gallery .gallery-image-wrapper:before,
.main section.gallery .card-gallery .gallery-image-wrapper:before {
    content: "";
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    transition: var(--duration-transition);
}

.villa section.gallery .card-gallery:hover .gallery-image-wrapper:before,
.gallery section.gallery .card-gallery:hover .gallery-image-wrapper:before,
.main section.gallery .card-gallery:hover .gallery-image-wrapper:before {
    background-color: rgba(var(--dark-color), 0.62);
}

.villa section.gallery .card-gallery .gallery-image-wrapper img,
.gallery section.gallery .card-gallery .gallery-image-wrapper img,
.main section.gallery .card-gallery .gallery-image-wrapper img {
    position: relative;
    width: 100%;
    border-radius: inherit;
}

.villa section.gallery .card-gallery .gallery-search,
.gallery section.gallery .card-gallery .gallery-search,
.main section.gallery .card-gallery .gallery-search {
    width: 28px;
    height: 28px;
    position: absolute;
    z-index: 2;
    top: 55%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
}

.villa section.gallery .card-gallery:hover .gallery-search,
.gallery section.gallery .card-gallery:hover .gallery-search,
.main section.gallery .card-gallery:hover .gallery-search {
    top: 50%;
    opacity: 100;
}

.villa section.gallery .card-gallery .gallery-detail,
.gallery section.gallery .card-gallery .gallery-detail,
.main section.gallery .card-gallery .gallery-detail {
    position: absolute;
    z-index: 2;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    padding: 0 20px;
    opacity: 0;
    transition-delay: 150ms;
}

.villa section.gallery .card-gallery:hover .gallery-detail,
.gallery section.gallery .card-gallery:hover .gallery-detail,
.main section.gallery .card-gallery:hover .gallery-detail {
    bottom: 12px;
    opacity: 100;
    /*transition-delay: 150ms;*/
}

.villa section.gallery .card-gallery .gallery-detail .detail-name,
.gallery section.gallery .card-gallery .gallery-detail .detail-name,
.main section.gallery .card-gallery .gallery-detail .detail-name {
    font-size: 1rem;
    color: rgba(var(--light-color), 1);
    font-family: var(--font-playfair-display-sc-regular);
    line-height: 124%;
    text-align: center;
    padding-bottom: 8px;
    border-bottom: var(--border-solid) rgba(var(--light-color), 0.24);
    margin-bottom: 4px;
}

.villa section.gallery .card-gallery .gallery-detail .detail-category,
.gallery section.gallery .card-gallery .gallery-detail .detail-category,
.main section.gallery .card-gallery .gallery-detail .detail-category,
.villa section.gallery .card-gallery .gallery-detail .detail-result,
.gallery section.gallery .card-gallery .gallery-detail .detail-result,
.main section.gallery .card-gallery .gallery-detail .detail-result {
    font-size: 0.75rem;
    text-transform: uppercase;
    color: rgba(var(--light-color), 1);
    font-family: var(--font-playfair-display-sc-regular);
}

.villa section.gallery .category-result,
.gallery section.gallery .category-result,
.main section.gallery .category-result {
    font-size: 0.813rem;
    color: rgba(var(--dark-color), 0.42);
}
/* END SECTION GALLERY */

/* RESPONSIVE */
@media (max-width: 991.98px) {
    .villa section.gallery .card-gallery .gallery-detail .detail-name,
    .gallery section.gallery .card-gallery .gallery-detail .detail-name,
    .main section.gallery .card-gallery .gallery-detail .detail-name {
        font-size: 0.913rem;
    }
}
/* END RESPONSIVE */