Ширина div не изменяется при масштабировании изображения

Я уменьшил img, используя процент ширины, чтобы лучше соответствовать экрану, однако ширина родительских div не масштабировалась, чтобы обернуть img.

HTML

<div class = "game-container">
  <div class = "game-table">
    <img src = "../../assets/img/table-top.png" class = "table-image">
    <div class = "table-cards">
      <div class = "card-holder">
        <img class = "card" src = "../../assets/img/cards/blue_back.png">
      </div>
      <div class = "card-holder">
        <img class = "card" src = "../../assets/img/cards/gray_back.png">
      </div>
      <div class = "card-holder">
        <img class = "card" src = "../../assets/img/cards/green_back.png">
      </div>
      <div class = "card-holder">
        <img class = "card" src = "../../assets/img/cards/red_back.png">
      </div>
      <div class = "card-holder">
        <img class = "card" src = "../../assets/img/cards/purple_back.png">
      </div>
    </div>
  </div>
</div>

CSS

.game-container {
  height: fit-content;
  width: fit-content;
}

.game-table {
  height: fit-content;
  width: fit-content;
}

.table-image {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 75%;
  transform: translate(-50%, -50%);
}

.table-cards {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: aqua 1px solid;
  display: flex;
}

.card-holder {
  border: blueviolet 3px solid;
  white-space: nowrap;
}

.card {
  width: 35%;
  vertical-align: middle;
  border: red 3px solid;
  display: inline-block;
  white-space:nowrap;
}

РЕЗУЛЬТАТ Изображение для отображения текущего макета

Я бы хотел, чтобы блок держателя карты (фиолетовый) подходил к карте (красный)

ЧТО Я ПЫТАЛСЯ

Я попытался изменить отображение карты и держателя карты на встроенный блок. Я также попытался сохранить ширину карты по умолчанию и вместо этого изменить ширину и масштаб держателя карты. Однако ни один из них не работал.

Спасибо!