.residence-box {
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    gap: 15px;
    border-bottom: 1px solid #dddddd;
}
.residence-box-left {
    position: relative;
    display: block;
    flex: 1 1 50%;
    overflow: hidden;
    background: #ffffff;
}
.residence-box-image {
    position: relative;
    width: 100%;
    object-fit: cover;
}
.residence-box-right {
    position: relative;
    flex: 1 1 50%;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: 5px;
    padding: 10px 0;
}

.residence-box-text-side {  
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: 5px;
}
.residence-box-logo-side {
    flex: 0 0 auto;
    display: block;
    text-align: right;
}
.residence-box-logo {
    height: 50px;
    margin-right: 15px;
}

.residence-box-title {
    position: relative;
    display: block;
    width: 100%;
    flex: 0 0 auto;
    font-size: 22px;
    font-weight: 500;
    color: #3892EC;
}
.residence-box-localisation {
    position: relative;
    display: block;
    width: 100%;
    flex: 0 0 auto;
}
.residence-box-units {
    position: relative;
    display: block;
    width: 100%;
    flex: 1 1 auto;
}

.residence-box-caption {
    position: relative;
    display: block;
    flex: 0 0 auto;
}

.residence-box-image-placeholder {
    position: relative;
    display: block;
    width: 100%;
    background: #dddddd;

    animation: imagePlaceholder 1s infinite linear;
}
.residence-box-image-placeholder + img {
    display: none;
}

.residence-box-image-placeholder:has(+ img.residence-box-logo) {
    display:inline-block;
    width: 50px;
    margin-right: 15px;
}

.residence-box-owl {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
.residence-box-owl-right {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 4;

    background: rgba(0, 0, 0, 0.75);
    padding: 5px 5px;
    padding-left: 10px;

    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;

    border: none;
}
.residence-box-owl-right svg.hero-img {
    height: 32px;
}
.residence-box-owl-right svg.hero-right {
    height: 16px;
}
.residence-box-owl-right svg path {
    stroke: #ffffff;
    transition: 0.2s all;
}

.residence-box-owl-right:hover svg path {
    stroke: #3892EC;
}

/*  */

.residence-box-owl-left {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 4;

    background: rgba(0, 0, 0, 0.75);
    padding: 5px 5px;
    padding-right: 10px;

    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;

    border: none;
}
.residence-box-owl-left svg.hero-map {
    height: 32px;
}
.residence-box-owl-left svg.hero-left {
    height: 16px;
}
.residence-box-owl-left svg path {
    stroke: #ffffff;
    transition: 0.2s all;
}

.residence-box-owl-left:hover svg path {
    stroke: #3892EC;
}

.residence-box-owl-left {
    display: flex;
    align-items: center;
    height: 42px;
}
.residence-box-owl-left div svg {
    height: 24px !important;
}
.residence-box-owl-left div {
    display: flex;
    flex-direction: column;
}
.residence-box-owl-left span {
    font-size: 12px;
    color: #ffffff;
    font-weight: 300;
    line-height: 15px;
}





.residence-box-map-wrap {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    background: grey;
    z-index: 1;
    transform: translateX(-100%);
    transition: 0.15s all;
}
.residence-box-map-wrap.active {
    transform: translateX(0);
}

.residence-box-map-wrap .leaflet-control-attribution {
    opacity: 0 !important;
}

.residence-box-bottom {
    display: flex;
    flex-wrap: nowrap;    
    justify-content: space-between;
    align-items: center;
}

.residence-box-final {

}
.residence-box-final-text {
    font-weight: 600;
}
.residence-box-final-text.green {
    color: #4CAF50;
}
.residence-box-final-text.orange {
    color: #FF9800;
}

.residence-box-buttons {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 10px;
    gap: 10px;
}
.residence-box-button {
    background: #ffffff;
    border-color: #ffffff;
    color: #3892EC;
    border-radius: 8px;
}
.residence-box-button svg {
    height: 24px;
}
.residence-box-button:hover {
    background: #3892EC;
    border-color: #3892EC;
    color: #ffffff;
}