@font-face{font-family:CertificateManrope;src:url('../assets/fonts/manrope-400.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:CertificateManrope;src:url('../assets/fonts/manrope-700.ttf') format('truetype');font-weight:700;font-display:swap}
@font-face{font-family:CertificateBrand;src:url('../assets/fonts/russo-one.ttf') format('truetype');font-weight:400;font-display:swap}
.card[data-design="4"],.card[data-design="5"]{container-type:inline-size;color:#f7f7fc;font-family:CertificateManrope,Arial,sans-serif}
.card:is([data-design="4"],[data-design="5"]) .face:after{display:none}
.card:is([data-design="4"],[data-design="5"]) .brand{top:9%;left:6%;gap:10px;font-size:clamp(14px,2.7cqw,20px);line-height:1.2;letter-spacing:0;text-shadow:none}
.card:is([data-design="4"],[data-design="5"]) .brand img{width:5cqw;height:auto;min-width:21px;filter:none}
.card:is([data-design="4"],[data-design="5"]) .brand small{font-family:CertificateManrope,Arial,sans-serif;font-size:clamp(9px,1.67cqw,12px);font-weight:400;letter-spacing:0;margin:3px 0 0}
.card:is([data-design="4"],[data-design="5"]) .details{top:42%;bottom:auto;left:6%;right:29%;text-shadow:none}
.card:is([data-design="4"],[data-design="5"]) .eyebrow{font-size:clamp(11px,1.8cqw,13px);letter-spacing:.08em;font-weight:400;white-space:nowrap}
.card:is([data-design="4"],[data-design="5"]) .service{font-family:CertificateBrand,Arial,sans-serif;font-size:clamp(18px,4.6cqw,35px);line-height:1.08;font-weight:400;max-width:100%;margin-top:10px;overflow-wrap:normal;white-space:normal;overflow:visible;text-overflow:clip}
.card:is([data-design="4"],[data-design="5"]) .recipient-line{position:absolute;top:auto;left:6%;bottom:8%;width:53%;max-width:53%;margin:0;font-size:clamp(11px,2.2cqw,15px);font-family:CertificateManrope,Arial,sans-serif;line-height:1.35;overflow-wrap:anywhere;max-height:none;text-shadow:none;white-space:normal;overflow:visible;text-overflow:clip}
.card:is([data-design="4"],[data-design="5"]) .amount{right:6%;bottom:8%;font-family:CertificateBrand,Arial,sans-serif;font-size:clamp(18px,4.2cqw,32px);line-height:1.2;text-shadow:none;box-shadow:none;border:0;border-radius:4px;padding:0;background:none}
.card[data-design="4"] .amount{color:#eab69a}
.card[data-design="5"] .amount{color:#fff;background:#a70f65;padding:8px 12px}
.card:is([data-design="4"],[data-design="5"]) .back-center{inset:0 auto 0 10%;width:38%;transform:none}
.card:is([data-design="4"],[data-design="5"]) .back-center img{width:auto;height:48%;max-width:70%;max-height:65%;object-fit:contain}
.variant[hidden]{display:none!important}
.variant{overflow-wrap:anywhere}
@media(max-width:480px){
 .card:is([data-design="4"],[data-design="5"]){aspect-ratio:1.4}
 .card.long-recipient:is([data-design="4"],[data-design="5"]){aspect-ratio:1.2}
 .card:is([data-design="4"],[data-design="5"]) .details{top:39%;right:22%}
 .card.long-recipient:is([data-design="4"],[data-design="5"]) .details{top:32%}
 .card:is([data-design="4"],[data-design="5"]) .eyebrow{font-size:10px;letter-spacing:.035em}
 .card:is([data-design="4"],[data-design="5"]) .service{font-size:clamp(17px,5.2cqw,24px);margin-top:7px}
 .card:is([data-design="4"],[data-design="5"]) .brand small{display:none}
 .card:is([data-design="4"],[data-design="5"]) .recipient-line{font-size:11px;width:52%;bottom:8%}
 .card[data-design="5"] .recipient-line{width:47%;max-width:47%}
 .card[data-design="5"] .amount{padding:6px 7px}
}