#coupon_list {display:grid; grid-template-columns:1fr; gap:14px; width:min(450px, 100%); margin:0 auto;}
#coupon_list * {box-sizing:border-box;}
#coupon_list h4,
#coupon_list h6 {margin:0; padding:0;}
#coupon_list .coupon_box {position:relative; display:flex; align-items:center; justify-content:space-between; min-height:118px; padding:0 20px 0 38px; overflow:visible; background:#000; color:#fff; cursor:pointer;}
#coupon_list .coupon_box.is_closed {filter:grayscale(100%); opacity:.55; cursor:not-allowed;}
#coupon_list .coupon_box:focus-visible {outline:3px solid #ff9800; outline-offset:3px;}
#coupon_list .coupon_box::before,
#coupon_list .coupon_box::after {content:""; position:absolute; top:50%; width:30px; height:30px; margin-top:-15px; border-radius:50%; background:#fff;}
#coupon_list .coupon_box::before {left:-15px;}
#coupon_list .coupon_box::after {right:-15px;}
#coupon_list .coupon_left {min-width:0; text-align:left;}
#coupon_list .coupon_rate {font-size:40px; font-weight:700;}
#coupon_list .coupon_meta {display:flex; align-items:center; gap:7px; margin-top:10px; color:#aaa;}
#coupon_list .coupon_issue_limit {color:#fff; font-size:13px; white-space:nowrap;}
#coupon_list .coupon_timer {color:#aaa; font-size:13px; white-space:nowrap;}
#coupon_list .coupon_icon {position:relative; z-index:2; display:flex; align-items:center; justify-content:center; flex:0 0 72px; width:72px; min-height:118px; color:#fff; pointer-events:none;}
#coupon_list .coupon_icon svg {display:block; width:28px; height:28px; fill:currentColor;}

@media (max-width:768px) {
  #coupon_list {width:min(650px, 100%);}
  #coupon_list .coupon_box {min-height:150px; padding:0 30px 0 36px;}
  #coupon_list .coupon_rate {font-size:44px;}
  #coupon_list .coupon_issue_limit {font-size:21px;}
  #coupon_list .coupon_timer {font-size:20px;}
  #coupon_list .coupon_icon {flex-basis:88px; width:88px; min-height:150px;}
  #coupon_list .coupon_icon svg {width:40px; height:40px;}
}