<div class="card-container">
  
  <div class="card">
    <div class="card-content">
      Some snazzy content
    </div>
    <div class="card-controls">
      <button class="card-control increase">Increase font</button>
      <button class="card-control decrease">Decrease font</button>
    </div>
  </div>
  
  <div class="card">
    <div class="card-content">
      🐌🪨🌱
    </div>
    <div class="card-controls">
      <button class="card-control increase">Increase font</button>
      <button class="card-control decrease">Decrease font</button>
    </div>
  </div>

  <div class="card">
    <div class="card-content">
      More content
    </div>
    <div class="card-controls">
      <button class="card-control increase">Increase font</button>
      <button class="card-control decrease">Decrease font</button>
    </div>
  </div>
  
</div>

/* Hide card controls by default */
.card-controls {
  opacity: 0;
}
  
/* Show card controls when hovering on card */
.card:hover .card-controls {
   opacity: 1;
}
  
/* Hover styles for the individual buttons */
.card-control:hover {
  background: rgba(0 0 0 / 0.8);
  color: white;
}

/* 
 * Presentational styles!
 *
 * Nothing beyond this point changes between the examples, or 
 * affects the hover/focus styles covered in this blog post.
 */
.card-container {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  gap: 1rem;
}

.card {
  --card-font-size: 2rem;
  
  display: grid;
  grid-template-areas: "card";
  
  width: var(--card-size, 200px);
  height: var(--card-size, 200px);
  
  border: 1px dashed black;
  
  cursor: default;
}

.card-content {
  grid-area: card;
  place-self: center; 
  max-width: 100%;
  max-height: 100%;
  
  font-family: sans-serif;
  font-size: var(--card-font-size, 2rem);
  text-align: center;
  
  overflow: hidden;
}

.card-controls {
  grid-area: card;
  align-self: end;
  
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  height: 33%;
  border-top: 1px dashed black;
}
  
.card-control {
  background: rgba(255 255 255 / 0.95);
  font-size: 1.1rem;
  color: black;
  border: none;
  cursor: pointer;
}
    
.card-control + .card-control{
  border-left: 1px dashed black;
}

const getFontSize = card => {
  const fontSize = getComputedStyle(card).getPropertyValue('--card-font-size') || '1rem'
  return parseFloat(fontSize)
}

const setFontSize = (card, fontSize) => {
  card.style.setProperty('--card-font-size', `${fontSize}rem`)
}

const scalingFactor = 1.1;

const cards = document.querySelectorAll('.card')

cards.forEach(card => {
  const increaseButton = card.querySelector('.card-control.increase')

  increaseButton.addEventListener('click', e => {
    const fontSize = getFontSize(card)
    setFontSize(card, fontSize * scalingFactor)
  })

  const decreaseButton = card.querySelector('.card-control.decrease')

  decreaseButton.addEventListener('click', e => {
    const fontSize = getFontSize(card)
    setFontSize(card, fontSize / scalingFactor)
  })
})