.mockup{gap:16px}@media screen and (min-width:768px){.mockup{display:grid;grid-template-columns:3fr 1fr}}@media screen and (max-width:767px){.mockup{display:flex;flex-direction:column;justify-content:center}}.mockup-section{display:flex;flex-direction:column;gap:20px}.mockup-section--viewer{justify-content:center;align-items:center;width:100%;height:500px;padding:40px 32px;border-radius:12px;box-shadow:0 0 2px #00000026}.mockup-image{display:flex;justify-content:center;position:relative;z-index:1;max-height:90dvh;aspect-ratio:675 / 1117;border-radius:12px;overflow:hidden}.mockup-image__img{position:relative;z-index:9;width:auto;height:100%;display:block;border-radius:15px}.mockup-image__frame{display:flex;justify-content:center;align-items:center;position:absolute;top:29%;left:22%;z-index:1;width:58%;height:49.5%;overflow:hidden;border-radius:10px;background:#ffffff0d}.mockup-image__frame--shadow{top:92%;transform:scaleY(-1);opacity:.9;filter:blur(1px)}.mockup-image__frame-img{display:block!important;width:100%;height:100%;background-size:cover;background-position:center;background-repeat:no-repeat}.mockup-image__frame-img.no-loaded{display:none}.mockup-image__text{width:100%;text-align:center;text-wrap:pretty;font-size:16px;line-height:1.35;padding-left:10%;padding-right:10%}.mockup-upload{position:relative;width:100%}.mockup-upload__input{display:none}.mockup-upload__design{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:40px 30px;border:2px dashed #d1d5db;border-radius:12px;transition:all .3s ease;min-height:180px;cursor:pointer}.mockup-upload__design.dragover,.mockup-upload__design:hover{background-color:rgba(var(--color-button),.25)}.mockup-upload__icon{width:32px;height:32px;color:rgb(var(--color-button-text))}.mockup-upload__text{color:#4a5568;font-weight:500;font-size:12px;line-height:1.35;text-align:center}.mockup-upload__uploaded{font-size:14px;color:#38a169;margin:0!important;text-align:center}.mockup-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:16px}.mockup-actions .button[disabled]{display:none;pointer-events:none;opacity:.5;cursor:not-allowed!important;-webkit-user-select:none;user-select:none}.mockup-actions .button--loading{position:relative;pointer-events:none;opacity:.8}.mockup-actions .button__text{transition:50ms opacity ease}.mockup-actions .button--loading .button__text{opacity:0}.mockup-actions .button--loading:before{content:"";position:absolute;right:12px;top:50%;left:50%;transform:translate(-50%,-50%);width:16px;height:16px;border:2px solid rgb(var(--color-button-text));border-top:2px solid transparent;border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:translate(-50%,-50%) rotate(360deg)}}