<div class="card">
  <div class="card-content">
    <h1>🎉</h1>
    <h3>A square!</h3>
  </div>
</div>

.card {
  position: relative;
  overflow: hidden;
  height: 0;
  padding-bottom: 100%;
}

.card-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Presentation */
body {
  max-width: 15em;
  margin: auto;
  padding: 1.5rem;
}

.card-content {
  display: grid;
  place-content: center;
  padding: 1.5rem;
  text-align: center;
  background-color: var(--alternate-background-color); 
}