.hero{
    width:980px;
    margin:18px auto;
}
.hero-promo{
    display:block;
    position:relative;
    width:980px;
    height:500px;
    background:
        linear-gradient(
            to bottom,
            #fafafa 0%,
            #eeeeee 100%
        );
    border:5px solid #ffffff;
    border-radius:8px;
    box-shadow:
        inset 0 0 0 1px #ffffff,
        0 2px 6px rgba(0,0,0,.40);
    overflow:hidden;
    opacity:0;
    transform:
        translateY(20px);
    animation:
        heroAppear 1s ease forwards;
}
.hero-promo img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transition:
        transform .35s ease;
}
.hero-promo:hover img{
    transform:
        scale(1.05);
}

@keyframes heroAppear{
    from{
        opacity:0;

        transform:
            translateY(30px);
    }
    to{
        opacity:1;
        transform:
            translateY(0);
    }

}