.coupon {
    background-color: transparent;
    --circle-size: 9px;
    text-align: center;
}

.coupon-top {
    width: 100%;
    font-size: 24px;
    color: #5B5156;
    background-color: white;
    -webkit-mask-image: radial-gradient(circle at 12px 101%, transparent 12px, red 12.5px), radial-gradient(closest-side circle at 50%, red 99%, transparent 100%);
    -webkit-mask-size: 100%, 17px var(--circle-size);
    -webkit-mask-repeat: repeat, repeat-x;
    -webkit-mask-position: -12px, 50% calc(100% + var(--circle-size)/2);
    -webkit-mask-composite: source-out;
    mask-composite: subtract;
    padding: 16px;
}

    .coupon-top .brand {
        font-size: 1.0rem;
    }

    .coupon-top .title {
        font-size: 2rem;
        font-weight: 600;
        padding: 2px;
        color: #dd6ca3;
    }

    .coupon-top .description {
        font-size: 1.0rem;
    }

.coupon-down {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 8px;
    color: #5B5156;
    width: 100%;
    background-color: white;
    -webkit-mask-image: radial-gradient(circle at 12px -1%, transparent 12px, red 12.5px), radial-gradient(closest-side circle at 50%, red 99%, transparent 100%);
    -webkit-mask-size: 100%, 17px var(--circle-size);
    -webkit-mask-repeat: repeat, repeat-x;
    -webkit-mask-position: -12px, 50% calc(var(--circle-size)/-2);
    -webkit-mask-composite: source-out;
    mask-composite: subtract;
    padding: 16px;
}

    .coupon-down .expire-time {
        font-size: 0.8rem;
    }