.page-feature{
    width:980px;
    height:var(--feature-height, 500px);
    background:
        linear-gradient(
            to bottom,
            #fafafa 0%,
            #eeeeee 100%
        );
    margin:18px auto;
    display:block;
    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(35px);
    animation:
        heroAppear 1s ease forwards;
}
.page-feature img{
    width:100%;
    height:100%;
    object-fit:cover;
}

@keyframes heroAppear{
    from{
        opacity:0;
        transform:
            translateY(100px);
    }
    to{
        opacity:1;
        transform:
            translateY(0);
    }
}