#property-carousel path.arrow, #property-carousel svg {
    color: #fff;
    background-color: transparent;
    transition: .2s;
}

#property-carousel .flickity-prev-next-button {
    background-color: transparent;
    border: 1px solid #fff;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
#property-carousel .flickity-prev-next-button path.arrow {
    fill: #fff;
    position: static;
    width: 35%;
    height: 35%;
}
#property-carousel .flickity-prev-next-button:hover {
    background-color: #fff;
}
#property-carousel .flickity-prev-next-button:hover path.arrow {
    fill: black;
}

/* #property-carousel img {
    height: 50vh;
    padding-left: 5px;
    padding-right: 5px;
    object-fit: cover;
    object-position: center;
}
.two-img-container {
    display: flex;
    justify-content: center;
    img { height: 100%;}
} */


#property-carousel .two-img-wrapper { /* two images with now overflow as long as possible, if they start overflowing, use js to display the slider instead of these */
    width: 100%;
    height: 50vh;
    display: flex;
    justify-content: center;
    overflow: hidden;
}
#property-carousel .two-img-wrapper img {
    /* width: 50%; */
    height: 100%;
    flex: 1 1 auto;
    object-fit: contain;
    max-width: min-content;
    padding: 0 5px;
}

/* 2 IMG LOGIC */
.carousel img {
    max-height: 50vh;
    padding: 0 5px;
}
.carousel.two-images { display: none; }

.two-img-wrapper.width-reached { display: none !important; }
.carousel.two-images.width-reached { display: block !important; }