.picture-item {
    height: 220px;
    margin-left: 0;
    margin-top: 24px
}

    .picture-item img {
        display: block;
        width: 100%
    }

@supports (object-fit:cover) {
    .picture-item img {
        height: 100%;
        max-width: none;
        object-fit: cover
    }
}

.picture-item--h2 {
    height: 464px
}

.picture-item__inner {
    background: #ecf0f1;
    height: 100%;
    overflow: hidden;
    position: relative
}

img.picture-item__blur {
    display: none
}

.picture-item__details {
    align-items: baseline;
    display: flex;
    justify-content: space-between;
    padding: 1em;
    width: 100%
}

.picture-item__description {
    margin: 0;
    padding: 0 2em 1em 1em;
    width: 100%
}

.picture-item__title {
    flex-shrink: 0;
    margin-right: 4px
}

.picture-item__tags {
    flex-shrink: 1;
    margin: 0;
    text-align: right
}

@media screen and (min-width:768px) {
    .picture-item--overlay .picture-item__details {
        background-color: #0009;
        bottom: 0;
        color: #fff;
        left: 0;
        overflow: hidden;
        position: absolute;
        width: 100%
    }

    .picture-item--overlay .picture-item__description {
        display: none
    }

    @supports (filter:blur(1px)) and ((-webkit-clip-path:inset(0 0 0 0)) or (clip-path:inset(0 0 0 0))) {
        .picture-item--overlay .picture-item__blur {
            -webkit-clip-path: inset(170px 0 0 0);
            clip-path: inset(170px 0 0 0);
            display: block;
            filter: blur(7px);
            left: 0;
            position: absolute;
            top: 0;
            z-index: 1
        }

        .picture-item--overlay .picture-item__details {
            background: none
        }

        .picture-item--overlay .picture-item__tags, .picture-item--overlay .picture-item__title {
            position: relative;
            z-index: 2
        }
    }
}

.my-shuffle-container {
    overflow: hidden;
    position: relative
}

.my-sizer-element {
    opacity: 0;
    position: absolute;
    visibility: hidden
}

.shuffle--animatein {
    overflow: visible
}

    .shuffle--animatein .picture-item__inner {
        opacity: 0;
        transform: translateY(220px)
    }

    .shuffle--animatein .picture-item__inner--transition {
        transition: all .6s ease
    }

    .shuffle--animatein .picture-item.in .picture-item__inner {
        opacity: 1;
        transform: translate(0)
    }

@media screen and (max-width:767px) {
    .picture-item {
        height: auto;
        margin-top: 20px
    }

    .picture-item__description, .picture-item__details {
        font-size: .875em;
        padding: .625em
    }

    .picture-item__description {
        padding-bottom: 1.25em;
        padding-right: .875em
    }

    .picture-item--h2 {
        height: auto
    }
}