.business-card-preview {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 50px;
    background-color: #e0efff
}

.business-card-preview .title {
    font-size: 14px;
    color: #444;
    font-weight: 500;
    line-height: 22px;
    margin-bottom: 8px;
    margin-top: 20px
}

.business-card-preview .title:first-of-type {
    margin-top: 0
}

.business-card-preview .card {
    --zoom-ratio: 1;
    width: 280px;
    aspect-ratio: 1.62790698;
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 2px;
    overflow: hidden;
    position: relative
}

.business-card-preview .card.front {
    background-image: url(https://pubcdn.ym.link/youma/code_preview/v1.8.5-prod.61/assets/business-card-front-D8KtyW9l.svg);
    background-color: #fff;
    box-shadow: 0 2.11px 16.05px #d1e2f566
}

.business-card-preview .card.front .main-content {
    position: absolute;
    top: 21px;
    left: 21px
}

.business-card-preview .card.front .field-logo {
    font-size: 0;
    height: 18px;
    width: auto;
    position: absolute;
    right: 21px;
    top: 23px
}

.business-card-preview .card.front .field-logo.demo img {
    mix-blend-mode: difference
}

.business-card-preview .card.front .field-logo img {
    height: 100%;
    width: auto;
    object-fit: contain
}

.business-card-preview .card.front .contact-content {
    position: absolute;
    bottom: 26px;
    left: 21px;
    right: 21px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end
}

.business-card-preview .card.front .contact-content .contact-list {
    font-size: 10px;
    line-height: 14px;
    color: #444;
    flex: 1
}

.business-card-preview .card.front .contact-content .contact-list .field-company {
    font-size: 10px;
    line-height: 14px;
    color: #444;
    display: flex
}

.business-card-preview .card.front .contact-content .contact-list .field-value {
    display: inline-block;
    vertical-align: middle
}

.business-card-preview .card.front .contact-content .contact-list .icon {
    width: 12px;
    height: 12px;
    background-size: contain;
    margin-right: 6px;
    vertical-align: middle
}

.business-card-preview .card.back {
    background-image: url("data:image/svg+xml,%3csvg%20fill='none'%20height='328'%20viewBox='0%200%20533%20328'%20width='533'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3cmask%20id='a'%20height='328'%20maskUnits='userSpaceOnUse'%20width='533'%20x='0'%20y='0'%3e%3cpath%20d='m.130859%204c0-2.20914%201.790861-4%204.000001-4h524.00014c2.209%200%204%201.79086%204%204v320c0%202.209-1.791%204-4%204h-524.00016c-2.20913%200-3.999981-1.791-3.999981-4z'%20fill='%23d9d9d9'/%3e%3c/mask%3e%3cmask%20id='b'%20height='328'%20maskUnits='userSpaceOnUse'%20width='533'%20x='0'%20y='0'%3e%3cpath%20d='m.130859%200h532v328h-532z'%20fill='%23fff'/%3e%3c/mask%3e%3cmask%20id='c'%20height='328'%20maskUnits='userSpaceOnUse'%20width='533'%20x='0'%20y='0'%3e%3cpath%20d='m532.131%20328h532v328h-532z'%20fill='%23fff'%20transform='matrix(-1%20-0%200%20-1%201064.262%20656)'/%3e%3c/mask%3e%3cg%20mask='url(%23a)'%3e%3cg%20mask='url(%23b)'%3e%3cpath%20d='m346.823%20293.548c-236.063%200-256.0288%2046.275-298.7839%2059.354%2026.3238%2014.419%20187.7209%202.716%20202.2079%203.521%2018.108%201.006%20164.482-10.563%20234.903-7.545%2056.336%202.415%2091.546-21.46%20102.109-33.7-7.042-55.162-22.635-156.432-28.671-120.216-7.545%2045.271-101.104%2098.586-211.765%2098.586z'%20fill='%234c79ff'%20opacity='.2'/%3e%3cpath%20d='m248.608%20301.516c-113.592-14.725-279.8965%2029.493-315.8521%2040.778l46.1855%2013.866h572.6156c7.268-34.234%2025.423-127.11%204.61-105.806-42.832%2043.841-159.997%2070.29-307.559%2051.162z'%20fill='%23154bed'%20opacity='.5'/%3e%3c/g%3e%3cg%20mask='url(%23c)'%3e%3cpath%20d='m185.438%2034.4522c236.064%200%20256.03-46.275%20298.785-59.3544-26.324-14.4185-187.722-2.7162-202.208-3.521-18.108-1.006-164.482%2010.563-234.9028%207.545-56.33643-2.4144-91.5467%2021.46049-102.1098%2033.6997%207.042%2055.1622%2022.6352%20156.4325%2028.6712%20120.2165%207.5451-45.2708%20101.1041-98.5858%20211.7644-98.5858z'%20fill='%234c79ff'%20opacity='.2'/%3e%3cpath%20d='m283.655%2026.4844c113.591%2014.7248%20279.896-29.49376%20315.852-40.7782l-46.186-13.8665h-572.6157c-7.2677%2034.23424-25.4226%20127.11-4.6098%20105.8066%2042.8323-43.8417%20159.9965-70.29039%20307.5595-51.1619z'%20fill='%23154bed'%20opacity='.5'/%3e%3c/g%3e%3c/g%3e%3c/svg%3e");
    background-color: #2a5fff;
    color: #fff
}

.business-card-preview .card.back .field-logo {
    height: 14px;
    width: auto;
    margin-bottom: 5px
}

.business-card-preview .card.back .field-logo img {
    height: 100%;
    widtH: auto;
    object-fit: contain
}

.business-card-preview .card.back .company-content {
    position: absolute;
    top: 60px;
    left: 50%;
    transform: translate(-50%);
    height: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center
}

.business-card-preview .card.scale-qrcode .field-qrcode img {
    width: 60px;
    height: 60px
}

.business-card-preview .card .field-qrcode {
    outline: .5px solid #2A5FFF;
    overflow: hidden;
    display: inline-block;
    line-height: 0
}

.business-card-preview .card .field-qrcode img {
    display: inline-block;
    width: 40px;
    height: 40px;
    background: transparent
}

.business-card-preview .card .field-name {
    font-size: 20px;
    font-weight: 400;
    line-height: 20px;
    color: #000
}

.business-card-preview .card .field-name:after {
    content: "";
    display: block;
    width: 11px;
    height: 2px;
    background: #2a5fff;
    margin: 6px 0
}

.business-card-preview .card .field-position {
    font-weight: 400;
    font-size: 10px;
    line-height: 10px;
    color: #888
}

.business-card-preview .card .field-company {
    font-size: 12px;
    line-height: 20px;
    font-weight: 400
}

.business-card-preview .card .field-slogan {
    font-size: 8px;
    line-height: 8px;
    letter-spacing: 1em;
    position: absolute;
    bottom: 10px;
    width: 100%;
    text-align: center
}