.attached-photos {
    margin: 0 0 12px; /*margin-top is set to -10px via filters panel breakpoint*/
    height: 210px;
}

/* 'cover' effect */
.attached-photos .carousel {
    height: 100%;
    background-color: white;
}
.attached-photos .carousel .carousel-inner {
    height: 100%;
}
.attached-photos .carousel .item {
    height: 100%;
}
.attached-photos .carousel .item img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}
/* remove odd gradients at sides */
.carousel-control {
    background: none !important;
}
/* defaults are for glyphicon */
.carousel-control .icon-prev, .carousel-control .icon-next {
    font-family: FontAwesome;
}
.carousel-control .fa-chevron-left:before {
    content: "\f053" !important;
}
.carousel-control .fa-chevron-right:before {
    content: "\f054" !important;
}
/* override: circle -> rect */
.carousel-indicators {
    bottom: 0;
    margin-bottom: 5px;
}
.carousel-indicators li {
    width: 25px !important;
    height: 3px !important;
    margin: 0 1px !important;
    border: 0;
    border-radius: 0;
    background-color: white;
    opacity: 0.6;
    /*make height higher for clicks*/
    box-sizing: content-box;
    background-clip: padding-box;
    border: 10px solid transparent;
    border-width: 10px 0;
}
.carousel-indicators li.active {
    opacity: 1;
}

/*
.attached-photos .carousel .item img {
without "object-fit: cover"
    / * take full width, scale by height, center vertically * /
    / * TODO: doesn't work if photo proportions is wider, implement 'cover' algorithm * /
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
*/

/* increase height on wider screens as photos are truncated too much */
@media (min-width: 500px) {
    .attached-photos {
        height: 250px;
    }
}
@media (min-width: 800px) {
    .attached-photos {
        height: 300px;
    }
}