.mockups{position:relative;width:100%}@media(min-width:48rem){.mockups{width:50%}}.mockups .header{display:flex;flex-direction:column}.mockups .header .heading{margin-bottom:1rem}.mockups .header .description{font-size:var(--text-lg-fontSize);line-height:var(--un-leading, var(--text-lg-lineHeight));margin-bottom:1rem}@media(min-width:40rem){.mockups .header .description{font-size:var(--text-2xl-fontSize);line-height:var(--un-leading, var(--text-2xl-lineHeight))}}@media(min-width:48rem){.mockups .header .description{font-size:var(--text-lg-fontSize);line-height:var(--un-leading, var(--text-lg-lineHeight))}}@media(min-width:64rem){.mockups .header .description{font-size:var(--text-2xl-fontSize);line-height:var(--un-leading, var(--text-2xl-lineHeight))}}.mockups .header .wizard-cta{display:flex;align-items:center;gap:1rem;margin-bottom:3rem;font-weight:500}@media(min-width:48rem){.mockups .header .wizard-cta{margin-bottom:2rem}}.mockups .header .wizard-cta span{font-size:1.25rem;text-wrap:balance}.mockups .header .wizard-cta .wizard-cta-button{display:flex;align-items:center;justify-content:center;gap:.5rem;flex-shrink:0;padding:.4rem .8rem;border:2px solid var(--color-neutral-700);border-radius:.5rem;background:#fff;font-size:1.1rem;font-weight:600;cursor:pointer;box-shadow:2px 2px 8px #0003}.mockups .header .wizard-cta .wizard-cta-icon{width:1.2rem;height:1.2rem}.mockups .grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.mockups .grid .mockup-item{position:relative;aspect-ratio:1;border-radius:.5rem;overflow:hidden;box-shadow:2px 2px 10px #00000040}.mockups .grid .mockup-item .mockup-item-spinner{position:absolute;top:.5rem;right:.5rem;z-index:30;width:1rem;height:1rem;opacity:.7;filter:drop-shadow(2px 2px 4px rgba(0,0,0,.25))}.mockups .grid .mockup-item .mockup-label{position:absolute;top:.4rem;left:.4rem;z-index:20;background-color:var(--bg);padding:.15rem .4rem;border-radius:.4rem;font-size:.65rem;-webkit-user-select:none;-moz-user-select:none;user-select:none;box-shadow:1px 1px 4px #0000001a}@media(min-width:40rem){.mockups .grid .mockup-item .mockup-label{font-size:.85rem}}.mockups .grid .mockup-item .mockup-expand-badge{position:absolute;right:.5rem;bottom:.5rem;z-index:20;width:1.7rem;height:1.7rem;display:flex;align-items:center;justify-content:center;border-radius:999px;background:#ffffff80;box-shadow:1px 1px 4px #0003;pointer-events:none}.mockups .grid .mockup-item .mockup-expand-icon{width:1rem;height:1rem;color:#222}.mockups .grid .mockup-img{position:absolute;inset:0;width:100%;height:100%;-o-object-fit:cover;object-fit:cover;display:block}.mockups .grid .mockup-img.old{z-index:1}.mockups .grid .mockup-img.current{z-index:2}.mockups .grid .mockup-img.placeholder{z-index:3}.mockups .grid .mockup-img.placeholder img{display:block;width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.mockups .grid .mockup-img.fade-in{z-index:2;opacity:0;animation:fadeIn .5s ease-in-out forwards}.mockups .grid .mockup-img.fade-out{pointer-events:none;animation:fadeOut .5s ease-in-out forwards}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}.mockup-item.has-image{cursor:zoom-in}.mockup-fullscreen{position:fixed;inset:0;z-index:1000;background:transparent;transition:background .35s ease}.mockup-fullscreen.is-open{background:#fff}.mockup-fullscreen .mockup-fullscreen-caption{position:fixed;z-index:5;box-sizing:border-box;display:flex;align-items:center;justify-content:center;margin:0;font-size:1rem;font-weight:600;line-height:1.3;text-align:center;text-wrap:balance;opacity:0;transform:translateY(-.5rem);pointer-events:none;transition:opacity .25s ease .15s,transform .25s ease .15s}.mockup-fullscreen .mockup-fullscreen-img{position:fixed;-o-object-fit:contain;object-fit:contain;transition:left .35s ease,top .35s ease,width .35s ease,height .35s ease,border-radius .35s ease}.mockup-fullscreen .mockup-fullscreen-close{position:absolute;top:1.25rem;right:1.25rem;z-index:10;width:3rem;height:3rem;display:flex;align-items:center;justify-content:center;border:none;border-radius:50%;cursor:pointer;opacity:0;transition:opacity .35s ease,background .2s}.mockup-fullscreen .mockup-fullscreen-close:hover{background:#00000026}.mockup-fullscreen.is-open .mockup-fullscreen-close{opacity:1}.mockup-fullscreen.is-open .mockup-fullscreen-caption{opacity:1;transform:translateY(0)}::view-transition-old(mockup-active){animation:none;opacity:0}::view-transition-new(mockup-active){animation:none;opacity:1}::view-transition-image-pair(mockup-active){animation-duration:.35s;animation-timing-function:ease-in-out}