.poster {
    position: relative;
    border-radius: 6px;
    overflow: hidden;
    max-width: 326px;

    @include bp (sm) {
        background-color: $color-primary-tertiary20;
        max-width: 600px;
    }

    img {
        display: block;
        width: 100%;
        height: auto;
        box-shadow:
            0 6px 6px rgba(#000, 0.08),
            0 12px 12px rgba(#000, 0.08),
            0 24px 24px rgba(#000, 0.08);
        border-radius: 4px;
        transition: transform 0.8s var(--ease-quart), border-radius 0.8s var(--ease-quart);
    }

    .buttons {
        display: flex;
        margin-top: 40px;
        justify-content: center;
        // opacity: 0;
        transform: translate3d(0, 48px, 0);
        transition: transform 0.8s var(--ease-quart), opacity 0.4s var(--ease-quart);

        @include bp (sm) {
            position: absolute;
            align-items: center;
            justify-content: center;
            bottom: 14px;
            left: 10%;
            right: 10%;
        }

        a {
            margin-right: 8px;
            margin-left: 8px;
            text-align: center;
        }
    }

    // Hover effect
    &:hover {
        img {
            transform: scale(0.8) translate3d(0, -5%, 0);
            border-radius: 8px;
        }
        .buttons {
            opacity: 1;
            transform: translate3d(0,0,0);
            // transition-delay: 50ms;
        }
    }

}