<ul>
  <li style='--star-seller: true'>
    <img src='https://i.etsystatic.com/6134138/c/2608/2073/256/78/il/ef5290/2553898693/il_680x540.2553898693_kcy5.jpg' />
    <h3>Caracol / Wood veneer lamp / White Birch</h3>
    <div class='rating'>★★★★★ <span class='num-ratings'>(33)</span><span class='star-seller'>✪ Star Seller</span></div>
    <p class='price'>CA$287.00</p>
    <p class='seller'>AwesomeSeller</p>
    <p class='free-delivery-badge'>FREE delivery</p>
    <p class='order-soon'>Only 3 left - order soon</p>
  </li>
  <li style='--order-soon: true'>
    <img src='https://i.etsystatic.com/21510179/r/il/ec1095/4146852636/il_680x540.4146852636_dg16.jpg' />
    <h3>Torched coffee table, Modern coffee table, Mid-century-table</h3>
    <div class='rating'>★★★★★ <span class='num-ratings'>(799)</span><span class='star-seller'>✪ Star Seller</span></div>
    <p class='price'>CA$438.66</p>
    <p class='seller'>CoffeeTablesCity</p>
    <p class='free-delivery-badge'>FREE delivery</p>
    <p class='order-soon'>Only 3 left - order soon</p>
  </li>
  <li style='--free-delivery: true'>
    <img src='https://i.etsystatic.com/7410583/c/1993/1584/178/0/il/a409c6/2488392685/il_680x540.2488392685_p5re.jpg' />
    <h3>Round Mirror with Floating Shelf - Simple Modern</h3>
    <div class='rating'>★★★★★ <span class='num-ratings'>(417)</span><span class='star-seller'>✪ Star Seller</span></div>
    <p class='price'>CA$657.52</p>
    <p class='seller'>MirrorsAndStuff</p>
    <p class='free-delivery-badge'>FREE delivery</p>
    <p class='order-soon'>Only 3 left - order soon</p>
  </li>
  <li style='--star-seller: true; --order-soon: true'>
    <img src='https://i.etsystatic.com/10983752/c/995/791/127/34/il/dffb9d/2493676805/il_680x540.2493676805_s5ea.jpg' />
    <h3>EWB Bench</h3>
    <div class='rating'>★★★★★ <span class='num-ratings'>(1294)</span><span class='star-seller'>✪ Star Seller</span></div>
    <p class='price'>CA$3,250.00</p>
    <p class='seller'>LuxuryGoods</p>
    <p class='free-delivery-badge'>FREE delivery</p>
    <p class='order-soon'>Only 1 left - order soon</p>
  </li>
  <li style='--star-seller: true; --free-delivery: true'>
    <img src='https://i.etsystatic.com/24970031/r/il/bff85e/3338021378/il_680x540.3338021378_to5j.jpg' />
    <h3>Square velvet pillow cover // 18" x 18" Velvet Cushion Covers</h3>
    <div class='rating'>★★★★★ <span class='num-ratings'>(672)</span><span class='star-seller'>✪ Star Seller</span></div>
    <p class='price'>CA$38.00</p>
    <p class='seller'>HomeClouds</p>
    <p class='free-delivery-badge'>FREE delivery</p>
    <p class='order-soon'>Only 3 left - order soon</p>
  </li>
  <li style='--free-delivery: true; --order-soon: true'>
    <img src='https://i.etsystatic.com/8214017/c/2250/1788/0/471/il/534cce/2235016772/il_680x540.2235016772_cncz.jpg' />
    <h3>Measuing Spoon Set | Brass</h3>
    <div class='rating'>★★★★★ <span class='num-ratings'>(332)</span><span class='star-seller'>✪ Star Seller</span></div>
    <p class='price'>CA$113.12</p>
    <p class='seller'>CookingGods</p>
    <p class='free-delivery-badge'>FREE delivery</p>
    <p class='order-soon'>Only 3 left - order soon</p>
  </li>
  <li style='--star-seller: true; --free-delivery: true; --order-soon: true;'>
    <img src='https://i.etsystatic.com/17020872/r/il/c378ff/4912089154/il_680x540.4912089154_afgy.jpg' />
    <h3>La vintage - Wooden hanginmg lamp (Price taxes included)</h3>
    <div class='rating'>★★★★★ <span class='num-ratings'>(10)</span><span class='star-seller'>✪ Star Seller</span></div>
    <p class='price'>CA$350.00</p>
    <p class='seller'>That80sStore</p>
    <p class='free-delivery-badge'>FREE delivery</p>
    <p class='order-soon'>Only 3 left - order soon</p>
  </li>
  <li>
    <img src='https://i.etsystatic.com/25197713/r/il/3be7a7/2654019096/il_680x540.2654019096_hw9q.jpg' />
    <h3>Large Extra Fluffy Pampas Grass</h3>
    <div class='rating'>★★★★★ <span class='num-ratings'>(251)</span><span class='star-seller'>✪ Star Seller</span></div>
    <p class='price'>CA$95.00</p>
    <p class='seller'>FunnyThings</p>
    <p class='free-delivery-badge'>FREE delivery</p>
    <p class='order-soon'>Only 3 left - order soon</p>
  </li>
  <li>
    <img src='https://i.etsystatic.com/5795020/r/il/2cbbd2/2453054590/il_680x540.2453054590_jhgw.jpg' />
    <h3>Magazine Rack - Walnut with solid brass</h3>
    <div class='rating'>★★★★★ <span class='num-ratings'>(845)</span><span class='star-seller'>✪ Star Seller</span></div>
    <p class='price'>CA$296.95</p>
    <p class='seller'>WalnutFactory</p>
    <p class='free-delivery-badge'>FREE delivery</p>
    <p class='order-soon'>Only 3 left - order soon</p>
  </li>
</ul>

@layer styles {
  body {
    font-family: system-ui, sans-serif;
  }

  ul {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    list-style: none;

    & li {
      width: 250px;

      & img {
        width: 100%;
        aspect-ratio: 4/3;
        object-fit: cover;
        margin-bottom: 6px;
      }

      & h3 {
        font-weight: 300;
        font-size: 13px;
        line-height: 18px;
        margin: 0;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }

      & .rating {
        display: flex;
        align-items: center;
        gap: 6px;

        & .num-ratings {
          font-weight: 300;
          font-size: 13px;
          line-height: 18px;
          color: #595959;
        }

        & .star-seller {
          color: #9560b8;
          font-weight: 600;
          font-size: 13px;
          line-height: 18px;
          display: none;
        }
      }

      & p.price {
        font-weight: 600;
        font-size: 16px;
        lien-height: 20px;
        margin: 0;
        margin-top: 6px;
      }

      & p.seller {
        color: #595959;
        font-weight: 300;
        font-size: 13px;
        line-height: 18px;
        margin: 0;
      }

      & p.free-delivery-badge {
        font-size: 11px;
        font-weight: 600;
        padding: 3px 6px;
        background: #d4e9d7;
        color: #222;
        border-radius: 20px;
        margin: 6px 0;
        display: none;
      }

      & p.order-soon {
        font-size: 13px;
        font-weight: 300;
        line-height: 18px;
        color: #a61a2e;
        margin: 0;
        margin-top: 3px;
        display: none;
      }
    }
  }
}

@container style(--star-seller: true) {
  .star-seller {
    display: inline-block;
  }
}

@container style(--free-delivery: true) {
  .free-delivery-badge {
    display: inline-block;
  }
}

@container style(--order-soon: true) {
  .order-soon {
    display: block;
  }
}

@container style(--star-seller: true) and style(--free-delivery: true) and style(--order-soon: true) {
  img {
    border: 3px solid red;
  }
}