.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%;
}

/*
.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;
    }
}