*{
    margin: 0;
    padding: 0;
}

body{
    width: 100svw;
    height: 100svh;
    overflow: hidden;
    position: relative;
}

.postcard{
    height: 15rem;
    width: 25rem;
    position: absolute;
    padding: 0.5rem;
    background-color: lightgray;
    transition: transform 0.5s ease-in-out, scale 0.5s ease-in-out;
}

.postcard:nth-child(1){
    top: 22rem;
    left: 12rem;
    transform: rotate(-20deg);
}
.postcard:nth-child(2){
    top: 4rem;
    left: 25rem;
    transform: rotate(-10deg);
}
.postcard:nth-child(3){
    top: 9rem;
    left: 32rem;
    transform: rotate(13deg);
}
.postcard:nth-child(4){
    top: 15rem;
    left: 20rem;
    transform: rotate(-17deg);
}
.postcard:nth-child(5){
    top: 10rem;
    left: 12rem;
    transform: rotate(-14deg);
}
.postcard:nth-child(6){
    top: 18rem;
    left: 50rem;
    transform: rotate(30deg);
}
.postcard:nth-child(8){
    top: 32rem;
    left: 45rem;
    transform: rotate(10deg);
}
.postcard:nth-child(7){
    top: 25rem;
    left: 35rem;
    transform: rotate(-20deg);
}
.postcard:nth-child(9){
    top: 34rem;
    left: 14rem;
    transform: rotate(-20deg);
}
.postcard:nth-child(10){
    top: 8rem;
    left: 50rem;
    transform: rotate(20deg);
}
.postcard:nth-child(11){
    top: 10rem;
    left: 60rem;
    transform: rotate(-10deg);
}
.postcard:nth-child(12){
    top: 30rem;
    left: 65rem;
    transform: rotate(15deg);
}

.postcard:hover{
    transform: initial;
    scale: 1.2;
    z-index: 5;
}

.picture{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.picture>img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.text{
    position: absolute;
    top: 1rem;
    left: -10rem;
    background-color: rgba(0, 0, 0, 0.5);
    padding: 0.3rem 0.5rem;
    color: white;
    opacity: 0;
    transform: translate3d(-100px, 0 0);
    transition: left 0.5s ease-in-out, opacity 0.2s ease-in-out, scale 0.5s ease-in-out;
}

.postcard:hover .text{
    opacity: 1;
    left: 0.5rem;
}