.mbd-vila-details {
    .Images {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-column-gap: 1.1rem;
        grid-row-gap: 1rem;
        position: relative;

        .ImgNum {
            bottom: 7rem;
            left: 5rem;
            pointer-events: none;
        }

        &.active {
            .ImgNum {
                display: none;
            }

            width: 66.66%;
            grid-template-columns: repeat(2, 1fr);

            .Imag {
                &:first-child {
                    grid-area: unset;
                }

                &:nth-child(3n - 2) {
                    grid-column: 1/3;
                }

                &:nth-child(5) {
                    &:before {
                        display: none;
                    }
                }

                img {
                    border-radius: unset !important;
                }
            }
        }

        .Imag {
            aspect-ratio: 1.31;

            img {
                object-fit: cover;
            }

            &:first-child {
                grid-area: 1 / 1 / 3 / 3;

                img {
                    border-top-right-radius: var(--radius-16);
                    border-bottom-right-radius: var(--radius-16);
                }
            }

            &:nth-child(3) {
                img {
                    border-top-left-radius: var(--radius-16);
                    border-bottom-left-radius: var(--radius-16);
                }
            }

            &:nth-child(5) {
                position: relative;

                &:before {
                    content: "";
                    width: 100%;
                    height: 100%;
                    pointer-events: none;
                    position: absolute;
                    top: 0;
                    right: 0;
                    background: rgba(0, 0, 0, 0.4);
                    border-top-left-radius: var(--radius-16);
                    border-bottom-left-radius: var(--radius-16);
                }

                img {
                    border-top-left-radius: var(--radius-16);
                    border-bottom-left-radius: var(--radius-16);
                }
            }
        }
    }

    .VilaDescription {
        svg {
            max-width: 1.714rem !important;
            max-height: 1.714rem !important;
        }

        .Title {
            svg {
                stroke: var(--secondary-main);
            }
        }

        .Owner {
            border-bottom: 0.1em solid var(--secondary-subtle);

            .OwnerText {
                .Score {
                    svg {
                        fill: var(--system-orange-0);
                    }
                }

                .SuccessfulBooking {
                    svg {
                        fill: var(--system-green-0);
                    }
                }
            }
        }

        .VilaInformation {
            border-bottom: 0.1em solid var(--secondary-subtle);

            .InformationProperty {
                svg {
                    max-width: 1.428rem !important;
                    max-height: 1.428rem !important;
                    stroke: var(--Black);
                }
            }
        }

        .Pool {
            border-bottom: 0.1em solid var(--secondary-subtle);
            .PoolTitle{
                width:100%;
                margin-bottom:1.5rem;
            }
        }

        .ItemBox {
            border: 0.1em solid var(--secondary-subtle);
            border-radius: var(--radius-8);

            span {
                &:first-child {
                    color: var(--text-dark-3);
                }
            }
        }

        .Operator {
            border-bottom: 0.1em solid var(--secondary-subtle);

            .OperatorBox {
                flex: 1 0 33%;
            }
        }

        .Description {
            border-bottom: 0.1em solid var(--secondary-subtle);
            color: var(--secondary-main);

            .title {
                svg {
                    width: 1.71rem;
                    height: 1.71rem;
                    stroke: var(--secondary-main);
                }

                strong {
                    font-size: 1.28rem;
                }
            }

            .desc {
                display: -webkit-box;
                -webkit-line-clamp: 5;
                -webkit-box-orient: vertical;
                overflow: hidden;
                text-overflow: ellipsis;
                font-size: 0.91rem;
                color: var(--secondary-main);
                text-align: justify;
                transition: all 0.3s ease;
                -webkit-transition: all 0.3s ease;
                -moz-transition: all 0.3s ease;
                -ms-transition: all 0.3s ease;
                -o-transition: all 0.3s ease;

                &.full-view {
                    -webkit-line-clamp: none;
                }
            }

            .view-more-btn {
                display: inline-flex;
                align-items: center;
                gap: 0.57rem;
                font-size: 1rem;
                font-weight: 700;
                color: var(--Black);
                cursor: pointer;

                .less-label {
                    display: none;
                }

                svg {
                    width: 0.91rem;
                    stroke: var(--Black);
                    transition: all 0.3s ease;
                    -webkit-transition: all 0.3s ease;
                    -moz-transition: all 0.3s ease;
                    -ms-transition: all 0.3s ease;
                    -o-transition: all 0.3s ease;
                }

                &.more {
                    .less-label {
                        display: block;
                    }

                    .more-label {
                        display: none;
                    }

                    svg {
                        transform: rotate(180deg);
                        -webkit-transform: rotate(180deg);
                        -moz-transform: rotate(180deg);
                        -ms-transform: rotate(180deg);
                        -o-transform: rotate(180deg);
                    }
                }
            }
        }

        .Location {
            border-bottom: 0.1em solid var(--secondary-subtle);
        }

        .Calendar {
            border-bottom: 0.1em solid var(--secondary-subtle);

            svg {
                stroke: var(--secondary-darker);
            }
        }

        .Regulations {
            border-bottom: 0.1em solid var(--secondary-subtle);

            .Time {
                .TimeBox {
                    flex: 1 0 50%;
                    border: 0.1em solid var(--secondary-subtle);
                    border-radius: var(--radius-8);
                    padding: 1rem;

                    svg {
                        stroke: var(--secondary-lighter);
                    }
                }
            }
        }

        .CancelReservation {
            border-bottom: 0.1em solid var(--secondary-subtle);

            .CancelReservationBox {
                strong {
                    font-size: 1.142rem;
                }

                &:first-of-type {
                    svg {
                        stroke: var(--system-green-0) !important;
                    }

                    border-bottom: 0.1em dashed var(--secondary-subtle);
                }

                &:nth-child(4) {
                    svg {
                        stroke: var(--system-orange-1) !important;
                    }

                    border-bottom: 0.1em dashed var(--secondary-subtle);
                }

                &:last-of-type {
                    svg {
                        stroke: var(--system-red-0) !important;
                    }
                }
            }
        }

        .SleepingSpace {
            border-bottom: 0.1em solid var(--secondary-subtle);
        }

        .Facilities {
            border-bottom: 0.1em solid var(--secondary-subtle);
        }

        .Comments {
            border-bottom: 0.1em solid var(--secondary-subtle);

            .Rate {
                svg {
                    fill: var(--system-orange-1);
                }
            }

            .CommentBox {
                border-radius: var(--radius-8);
                border: 0.1em solid var(--secondary-subtle);
                padding: 1rem;

                .UserInformation {
                    svg {
                        fill: var(--system-orange-1);
                    }
                }

                .UserCommentText {
                    border-bottom: 0.1em solid var(--secondary-subtle);
                    padding-bottom: 0.5em;
                }
            }

            .ShowMore {
                svg {
                    stroke: var(--secondary-darker);
                }
            }
        }

        .View {
            border-bottom: 0.1em solid var(--secondary-subtle);
        }

        .OwnerDetails {
            border-bottom: 0.1em solid var(--secondary-subtle);

            svg {
                max-width: 1.428rem !important;
                max-height: 1.428rem !important;
                stroke: var(--secondary-darker);
            }
        }
    }

    @media screen and (min-width: 992px) {
        .VilaDescription {
            width: 66.66%;
        }

        .VilaDetailsSide {
            width: 32%;
            margin-right: 1rem;
        }
    }

    .RemoveImg {
        top: 7rem;

        span {
            line-height: 0;
        }
    }
}

.maximize-image {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 10000000000;
    background-color: rgba(0, 0, 0, 0.9);

    .layout {
        .ImagesGallery {
            width: 50%;

            .swiper-slide {
                height: auto !important;
            }
        }

        .ImagesGallery-thumbs {
            width: 8rem;
            height: 100%;
            right: 8rem;
            top: 50%;
            transform: translate(0, -50%);
            -webkit-transform: translate(0, -50%);
            -moz-transform: translate(0, -50%);
            -ms-transform: translate(0, -50%);
            -o-transform: translate(0, -50%);

            img {
                object-fit: cover;
            }
        }

        .close {
            width: 3rem;
            height: 3rem;
            top: 0;
            left: 0;
            border-bottom-right-radius: 5px;
            background-color: #fff;
            border: solid 2px #000;
            cursor: pointer;
            z-index: 2;

            svg {
                width: 2rem;
                height: 2rem;
                fill: #000;
            }
        }
    }
}