Javascript-форум - Галерея с миниатюрами на чистом JavaScript

Здравствуйте,
есть необходимость сделать карточку товара, одно большое изображение и 5 цветов в виде миниатюр, при нажатии, меняется основное изображение. Функционал вроде я реализовал, но никак не разберусь с активным элементом, необходимо, чтобы по умолчанию был выбран первый элемент (синяя рамка вокруг миниатюры), а при последующем нажатии удалялся активный класс и добавлялся нажатой миниатюре.

Карточки будут менятся в зависимости он содержание заголовка h2. также подтягивать необходимые изображения

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Привет HTML</title>
 
  <style type="text/css">
    .wraper {
      display: flex;
      justify-content: space-around;
    }
    .active {
      margin: -3px;
      border: 3px solid #597df7;
    }
    .item_max {
      height: 400px;
      width: 150px;
      cursor: pointer;
    }
 
    .item {
      height: 100px;
      width: 70px;
      cursor: pointer;
      box-shadow: 0.4em 0.4em 5px rgb(122 122 122 / 50%);
    }
    .item1 {background: url(images/1Ualy.jpg)}
    .item2 {background: url(images/1Umag.jpg)}
    .item3 {background: url(images/1Udark.jpg)}
    .item4 {background: url(images/1Uman.jpg)}
    .item5 {background: url(images/1Usand.jpg)}
  </style>
</head>
<body>
 
  <span>Модель:</span>
 
  <h2>1U</h2>
 
  <div id="wraper" class="wraper">
    <div id="big" class="item_max">Аляска</div>
    <div class="item item1 active" id="aly">Аляска</div>
    <div class="item item2" id="sand">Манхеттен</div>
    <div class="item item3" id="man">Санд</div>
    <div class="item item4" id="mag">Грей</div>
    <div class="item item5" id="dark">Магнолия</div>
  </div>
 
  <script>
 
    let model = document.querySelector('h2').innerHTML;
 
    let aly = document.getElementById('aly');
    let sand = document.getElementById('sand');
    let man = document.getElementById('man');
    let mag = document.getElementById('mag');
    let dark = document.getElementById('dark');
 
    const colors = [aly, sand, man, mag, dark];
 
    const bigPic = document.getElementById("big");
    bigPic.style.backgroundImage = 'url(images/' + model + colors[0].id + '.jpg)';
 
    for (let i = 0; i < colors.length; i++) {
      colors[i].onclick = function () {
        bigPic.style.backgroundImage = 'url(images/' + model + colors[i].id + '.jpg)';
      };
    colors[i].className += ' active';
    }
 
  </script>
 
</body>