/* ======================================
   MEMORY CARD
====================================== */

/* Card */

.memory-card{
    position:relative;
    width:min(420px,100%);
    margin:auto;
}

/* Frame */

.memory-frame{
    display:block;
    width:100%;
    position:relative;
    z-index:2;
    filter:
        drop-shadow(0 12px 20px rgba(0,0,0,.12));
}

/* Photo Viewport */

.memory-photo{
    position:absolute;
    overflow:hidden;
    z-index:1;
}

/* Photo */

.memory-photo img{
    position:absolute;
    display:block;

    width:100%;
    height:100%;

    object-fit:cover;

    display:block;
}

.memory-photo.scene-01-homecoming{
    top: 109px;
    left: 69px;
    width: 283px;
    height: 330px;
    transform: rotate(-2.1deg);
    transform-origin: center;
}

.memory-photo.scene-01-homecoming img{
    object-position:50% 45%;
}

.memory-photo.scene-02-cushion{
    top: 109px;
    left: 69px;
    width: 283px;
    height: 330px;
    transform: rotate(-2.1deg);
    transform-origin: center;
}

.memory-photo.scene-02-cushion img{
    object-position:50% 45%;
}

.memory-photo.scene-03-first-cake{
    top: 109px;
    left: 69px;
    width: 283px;
    height: 330px;
    transform: rotate(-2.1deg);
    transform-origin: center;
}

.memory-photo.scene-03-first-cake img{
    object-position:50% 45%;
}

.memory-photo.scene-04-christmas{
    top:109px;
    left:69px;
    width:283px;
    height:330px;

   transform: rotate(-2.1deg);
    transform-origin: center;
}

.memory-photo.scene-04-christmas img{
    object-position:50% 45%;
}

.memory-photo.scene-05-first-smiles{
    top: 108px;
    left: 68px;

    width: 283px;
    height: 330px;

    transform: rotate(-2.1deg);
    transform-origin: center;
}

.memory-photo.scene-05-first-smiles img{
    object-position:50% 45%;
}

.memory-photo.scene-06-valentines{
    top: 108px;
    left: 68px;

    width: 283px;
    height: 330px;

 transform: rotate(-2.1deg);
    transform-origin: center;
}

.memory-photo.scene-06-valentines img{
 object-position:50% 45%;
}

.memory-photo.scene-07-ladybug{
    top: 108px;
    left: 68px;

    width: 283px;
    height: 330px;

 transform: rotate(-2.1deg);
    transform-origin: center;
}

.memory-photo.scene-07-ladybug img{
    object-position:50% 45%;
}