.details__hero {
    position: relative
}
.details,
.details__content {
    background-color: #fff
}
.hero__wrapper {
    background-color: #f3f4f5
}
.hero-mosaic {
    max-width: 800px;
    margin: 0 auto;
    display: -ms-flexbox;
    display: flex
}

.hero-mosaic__main-photo {
    cursor: pointer;
    position: relative;
    overflow: hidden
}
.hero-mosaic__main-photo img{
    max-width: 100%;
}
.media-type-bar {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
    line-height: 1
}

.media-type-bar__container {
    border-radius: 3px;
    overflow: hidden;
    box-shadow: 0 1px 1px 0 rgba(51, 63, 72, .2)
}
.media-type-bar__count,
.media-type-bar__text {
    margin-left: .25rem;
    font-family: Museo-Sans-500, Helvetica Neue, Helvetica, Arial, sans-serif;
    font-size: .875rem
}

.media-type-bar__text {
    display: none
}
.hero-mosaic__media-type-bar {

    position: absolute;
    bottom: 1rem;
    left: 0;
    right: 0;

}
.hero-mosaic__status-badge {

    position: absolute;
    border-radius: 3px;
    top: 1rem;
    left: 1rem;

}
.hero-mosaic__overlay {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center;
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: 0;
    overflow: hidden;
    background: rgba(32, 40, 46, .42)
}

.hero-mosaic__image-counter {
    color: #fff;
    font-family: Museo-Sans-500, Helvetica Neue, Helvetica, Arial, sans-serif;
    font-size: 40px
}
@media only screen and (min-width:801px) {
    .media-type-bar__text {
        display: inline
    }
}

.media-type-bar__icon {
    font-size: 1rem
}

.media-type-bar__media {
    padding: .5rem 1rem;
    color: #333f48;
    background: #fff;
    border: none;
    border-right: 1px solid #e9ebed;
    text-decoration: none
}

.media-type-bar__media:last-child {
    border: none
}

.media-type-bar__media:focus {
    outline: none
}

.media-type-bar__media:visited {
    color: #333f48
}

.media-type-bar__media:hover {
    background: #f7f8f9
}
.hero-image__media-type-bar {
    position: absolute;
    bottom: 1rem;
    left: 0;
    right: 0
}
.hero-image__status-badge {
    position: absolute;
    border-radius: 3px;
    top: 1rem;
    left: 1rem
}
.badge {
    color: #fff;
    font-family: Museo-Sans-300, Helvetica Neue, Helvetica, Arial, sans-serif;
    font-size: .875rem;
    padding: .25rem .5rem;
    pointer-events: none
}
.hero-mosaic__sidewrapper {
    display: none
}
@media only screen and (min-width:501px) {
    .hero-mosaic__main-photo {
        display: -ms-flexbox;
        display: flex;
        width: 100%;
        min-height: 330px;
        height: 55vh;
        max-height: 460px
    }
    .hero-mosaic__main-photo img {
        height: auto;
        top: 50%;
        left: 50%;
        position: absolute;
        transform: translate3d(-50%, -50%, 0)
    }
    @supports (object-fit:cover) {
        .hero-mosaic__main-photo img {
            position: static;
            transform: none;
            object-fit: cover;
            width: 800px;
            height: 460px
        }
    }
}
.hero-mosaic__sidewrapper{
    display: none;
}
@media only screen and (min-width:1141px) {
    .hero-mosaic {
        max-width: 1110px;
        padding-top: .25rem
    }
    .hero-mosaic__side-photo {
        width: 355px;
        height: 248px;
        overflow: hidden;
        position: relative;
        cursor: pointer
    }
    .hero-mosaic__side-photo img {
        top: 50%;
        left: 50%;
        position: absolute;
        transform: translate3d(-50%, -50%, 0)
    }
    .hero-mosaic__main-photo {
        max-height: 500px;
        margin-right: .25rem
    }
    .hero-mosaic__main-photo img {
        height: auto
    }
     .hero-mosaic__second-side-photo {
        margin-top: .25rem
    }
    .hero-mosaic__main-photo {
        max-height: 500px;
        margin-right: .25rem
    }
    .hero-mosaic__main-photo img {
        height: auto
    }
    .hero-mosaic__sidewrapper {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-direction: column;
        flex-direction: column;
        -ms-flex-pack: justify;
        justify-content: space-between;
        min-height: 330px;
        max-height: 500px;
        height: 55vh
    }
}
.admin-bar .pswp {
  top: 32px;
}