Customize car brand selection dropdown

HTML

<div style="height: 50vh;">
  <h2>Advanced Custom Select</h2>

  <select name="car-new">
    <button>
      <strong>Car Brand</strong>
      <selectedcontent></selectedcontent>
    </button>
    <div class="options">
      <option value="">Find your next car</option>
      <option value="audi"><span>Audi</span> <img src="https://github.com/evayde/selectlist-examples/blob/main/examples/img/audi.png?raw=true" alt="" width="150"></option>
      <option value="bmw"><span>BMW</span> <img src="https://github.com/evayde/selectlist-examples/blob/main/examples/img/bmw.png?raw=true" alt="" width="150"></option>
      <option value="byd"><span>BYD</span> <img src="https://github.com/evayde/selectlist-examples/blob/main/examples/img/byd.png?raw=true" alt="" width="150"></option>
      <option value="tesla"><span>Tesla</span> <img src="https://github.com/evayde/selectlist-examples/blob/main/examples/img/tesla.png?raw=true" alt="" width="150"></option>
      <option value="vw"><span>VW</span> <img src="https://github.com/evayde/selectlist-examples/blob/main/examples/img/vw.png?raw=true" alt="" width="150"></option>
      <option value="xiaomi"><span>Xiaomi</span> <img src="https://github.com/evayde/selectlist-examples/blob/main/examples/img/xiaomi.png?raw=true" alt="" width="150"></option>
    </div>
  </select>
</div>

CSS

body {
  margin: 0;
  padding: 0;
  display: grid;
  place-items: center;
  height: 100vh;
  font-family: system-ui;
}

[name="car-new"],
[name="car-new"]::picker(select) {
  appearance: base-select;
}

/** Select Button **/
select {
  padding: 1rem 2rem;
  border-radius: 2rem;
  width: 300px;
  border-width: 0;
  box-shadow: 0 0 9px #5553;

  &:hover {
    background-color: #f1f1f1;
  }

  &:open {
    box-shadow: 0 0 9px #3333;
  }

  & button {
    display: grid;

    & selectedcontent {
      & img {
        display: none;
      }
    }
  }

  /** Remove Caret from Select (aka dropdown indicator) **/
  &::picker-icon {
    display: none;
  }
}

/** Popover that opens after clicking the button **/
::picker(select) {
  border-width: 0;
  margin-top: 0.5rem;
  box-shadow: 0 10px 30px #3333, 0 0 8px #5553;
  background-color: #f5f5f5;
  border-radius: 2rem;
}

.options {
  display: grid;
  grid-template: 1fr 1fr / 1fr 1fr 1fr;
}

option {
  display: flex;
  flex-direction: column;
  padding: 1rem 2rem;

  /** Remove checkmark icon from selected option **/
  &::checkmark {
    display: none;
  }

  &:hover {
    background-color: #fff;
  }

  & > img {
    mix-blend-mode: luminosity;
  }

  &:hover > img {
    mix-blend-mode: hard-light;
  }

  &[value=""] {
    display: none;
  }
}