.impressions-item {
    @include size(100%);

    display: block;

    &__image-wrapper {
        position: relative;
        display: block;
        overflow: hidden;
        margin: 0;
    }

    &__image-caption {
        position: absolute;
        bottom: .75rem;
        right: 1.25rem;
        color: var(--rocket-color-white-base);
        text-shadow: 1.5px 1.5px 2px var(--rocket-color-black-base);
        font-family: var(--rocket-font-tertiary);
        font-size: 0.75rem;
        font-weight: 300;
        z-index: 5;
        max-width: calc(100% - 2.5rem);
    }

    &__image {
        display: block;
        overflow: hidden;
        will-change: transform;

        img {
            @include transition($duration: 500ms);

            display: block;
            filter: grayscale(0);
        }
    }

    @include event {
        img {
            filter: grayscale(1);
            transform: scale(1.1);
        }
    }
}
