main{
    background: 
    url(../img/postcard/bg.png) center 0 / 100% no-repeat, 
    linear-gradient(180deg, #b5d781 0%, #68c9f3 0%) center 0;
}
@media (max-width: 768px) {
    main{
        background: 
        url(../img/postcard/bg-m.png) center 0 / 100% no-repeat, 
        linear-gradient(180deg, #b5d781 0%, #68c9f3 0%) center 0;
    }
}

#step-1{
    width: calc(100dvw*1300/1920);
}

.deco-1{
    width: calc(100dvw*169/1920);
}

.emoji-block,
#attraction-grid,
#quotes-container{
    width: calc(100dvw*960/1920);
    padding: calc(100dvw*80/1920);
    place-items: center
}
#attraction-grid{padding: calc(100dvw*35/1920);}
#quotes-container{place-items: initial; padding-left: calc(100dvw*140/1920);}

.emoji-btn{
    width: calc(100dvw*88/1920);
    padding: calc(100dvw*10/1920);
    background-size: 100%;
    background-repeat: no-repeat;
}
.emoji-btn.selected{
    background-image: url(../img/postcard/selected.png);
}
.emoji-btn>img{width: calc(100dvw*65/1920);}

.deco-2{
    position: absolute;
    display: block;
    width: calc(100dvw*163/1920);
    top: 0;
    left: 0;
    transform: translate(-50%, -50%);
}

.deco-3{
    position: absolute;
    display: block;
    width: calc(100dvw*169/1920);
    bottom: 0;
    right: 0;
    transform: translate(50%, 50%);
}

.deco-4{
    position: absolute;
    display: block;
    width: calc(100dvw*174/1920);
    top: calc(100dvw*480/1920);
    left: 0;
    transform: translate(-70%, 0%);
}

.deco-5{
    position: absolute;
    display: block;
    width: calc(100dvw*210/1920);
    bottom: calc(100dvw*200/1920);
    right: 0;
    transform: translate(60%, 50%);
}

.deco-6{
    position: absolute;
    display: block;
    width: calc(100dvw*156/1920);
    top: calc(100dvw*340/1920);
    left: 100%;
    transform: translate(-50%, 0%);
}

.deco-7{
    position: absolute;
    display: block;
    width: calc(100dvw*249/1920);
    top: calc(100dvw*1200/1920);
    left: 0;
    transform: translate(-50%, 0);
}

@media (max-width: 768px) {
    #step-1{width: calc(100dvw*600/640);}



    .deco-1{width: calc(100dvw*149/640);}

    .emoji-block,
    #attraction-grid,
    #quotes-container{
        width: calc(100dvw*584/640);
        padding: calc(100dvw*50/640);
    }
    #attraction-grid{padding: calc(100dvw*35/640);}
    #quotes-container{padding-left: calc(100dvw*50/640); padding-right:0; }

    .emoji-btn{
        width: calc(100dvw*80/640);
        padding: calc(100dvw*5/640);
    }
    .emoji-btn>img{width: calc(100dvw*65/640);}

    .deco-2{
        width: calc(100dvw*125/640);
        transform: translate(-10%, -50%);
    }

    .deco-3{
        width: calc(100dvw*129/640);
        transform: translate(10%, 50%);
    }

    .deco-4,.deco-5{display: none;}

    .deco-6{
        width: calc(100dvw * 128 / 640);
        top: 0;
        right: 0;
        left: initial;
        transform: translate(15%, 20%);
    }

    .deco-7{
        width: calc(100dvw*205/640);
        top: initial;
        bottom: 0;
        left: initial;
        right: 0;
        transform: translate(0, 20%);
    }
}



#step-1>div{gap: calc(100dvw*50/1920);}
.step1-card{width: calc(100dvw*700/1920);}
.step-1-right{padding: calc(100dvw*30/1920) 0 calc(100dvw*45/1920);}
.step1-card-r-1{width: calc(100dvw*505/1920); transform: translate(calc(100dvw* -30/1920) ,0);}
.step1-card-r-2{width: calc(100dvw*572/1920);}
.step1-card-r-2-m{display: none;}
@media (max-width: 768px) {
    .step-1-right{gap: calc(100dvw*40/640);}
    .step1-card{width: calc(100dvw*600/640);}
    .step1-card-r-1{width: calc(100dvw*448/640); transform: translate(calc(100dvw* -25/640) ,0);}
    .step1-card-r-2{display: none;}
    .step1-card-r-2-m{display:block; width: calc(100dvw*507/640);}
}


#step-2{gap: calc(100dvw*40/1920);}
.spot-name,.quote-font{font-size: calc(100dvw*25/1920);}
.final-show{
    width: calc(100dvw*540/1920);

    -webkit-filter: drop-shadow(0 0 8px #ffffff);
    filter: drop-shadow(0 0 8px #ffffff);
    transform: translateZ(0);
    will-change: filter;
}

.action-btns{gap: calc(100dvw*30/1920);}

@media (max-width: 768px) {
    #step-2{gap: calc(100dvw*50/640);}
    .spot-name{font-size: calc(100dvw*25/640);}
    .quote-font{font-size: calc(100dvw*20/640);}
    .final-show{width: calc(100dvw*540/640);}
    .action-btns{gap: calc(100dvw*30/640);}
}

@media (max-width: 768px) {
    .h2-title{
        max-width: initial;
    }
}