.qr-scanner-banner { background-size: cover; background-position: left center; } .qr-scanner-banner .banner-title { font-size: 2rem; } .qr-scanner-banner .banner-hint { font-size: 1.35rem; } @media (min-width: 900px) { .qr-scanner-banner { text-shadow: 0px 0px 2px rgba(255, 255, 255, 0.65); } .qr-scanner-banner .banner-title { font-size: 2.2rem; } .qr-scanner-banner .banner-hint { font-size: 1.45rem; } } @media (min-width: 1200px) { .qr-scanner-banner { background-position: right 20% center; } .qr-scanner-banner .banner-titles { max-width: 55%; } .qr-scanner-banner .banner-title { font-size: 2.2rem; } .qr-scanner-banner .banner-hint { font-size: 1.75rem; } } @media (min-width: 1400px) { .qr-scanner-banner { background-position: right center; } .qr-scanner-banner .banner-titles { max-width: 65%; } .qr-scanner-banner .banner-title { font-size: 2.6rem; } } .qr-scanner-banner .banner-titles { color: #2F2F2F; } .qr-scanner-actions { margin: 5rem auto 0 auto; } .qr-scanner-actions.desktop { display: grid; grid-template-columns: 380px 1fr; width: 850px; max-width: 100%; min-height: 430px; gap: 64px; } .qr-scanner-actions.desktop .image { display: flex; width: 100%; height: 100%; position: relative; justify-content: center; align-items: center; } .qr-scanner-actions.desktop .image .action-img { position: absolute; width: 100%; height: auto; opacity: 0; transition: 300ms ease-in-out; } .qr-scanner-actions.desktop .image .action-img.active { opacity: 1; } .qr-scanner-actions.desktop .actions { display: flex; flex-direction: column; justify-content: center; } .qr-scanner-actions.mobile { width: 360px; } .qr-scanner-actions.mobile .action-img { width: 320px; height: auto; margin: 1rem auto; display: block; } .qr-scanner-actions.mobile .swiper { width: 100%; height: 100%; padding-bottom: 2rem; } .qr-scanner-actions.mobile .action-wrapper { min-height: 120px; } .qr-scanner-actions.mobile .action-wrapper .icon { display: flex; align-items: center; } .qr-scanner-actions.desktop { display: none; } .qr-scanner-actions.mobile { display: grid; } @media (min-width: 1200px) { .qr-scanner-actions.desktop { display: grid; } .qr-scanner-actions.mobile { display: none; } } .qr-scanner-actions .action-wrapper { display: grid; gap: 0.5rem 1.5rem; grid-template-columns: 40px 1fr; grid-template-rows: auto 1fr; grid-template-areas: 'icon title' 'icon description'; padding: 0.5rem; margin-bottom: 1.5rem; cursor: pointer; background-color: #FFF; } .qr-scanner-actions .action-wrapper .icon { grid-area: icon; width: 40px; opacity: 0.5; transition: 300ms ease-in-out; } .qr-scanner-actions .action-wrapper .title { grid-area: title; font-size: 1.3rem; line-height: 1.4; margin: 0; padding: 0; font-weight: bold; } .qr-scanner-actions .action-wrapper .description { grid-area: description; font-size: 1rem; line-height: 1.4; margin: 0; padding: 0; } .qr-scanner-actions .action-wrapper:last-child { margin-bottom: 0; } .qr-scanner-actions .action-wrapper.active .icon { opacity: 1; } @media (min-width: 900px) { .qr-scanner.app-link-title { font-size: 1.2rem; } }