body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  margin: 0;
}

* {
  box-sizing: border-box;
}

section {
  margin-top: 20px;
}

.box-container {
  width: 778.778px;
  padding: 1rem;
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  border: 1px solid grey;
}

.box {
  border: 1px solid black;
  transition: transform 100s;
}

.box:hover {
  /* 1. Using only translate : no problem  */
  /*   transform: translate(0, 0); */
  /* 2. Using with rotate or skew or scale : has problem   */
  transform: translate(0, 0) rotate(0deg);
}

const updateWidths = (adjustment) => {
  const boxContainer = document.querySelector(".box-container");
  const box = document.querySelector(".box");

  let currentContainerWidth = parseFloat(getComputedStyle(boxContainer).width);
  currentContainerWidth += adjustment;
  boxContainer.style.width = `${currentContainerWidth}px`;

  document.getElementById("current-width").innerText = currentContainerWidth;

  const currentBoxWidth = parseFloat(getComputedStyle(box).width);
  document.getElementById("current-box-width").innerText = currentBoxWidth;
};

const decrease1px = () => updateWidths(-1);
const increase1px = () => updateWidths(1);

const init = () => {
  updateWidths(0);
};

init();