.panel-wrap{
  width: min(100%, 1100px);
  margin: 0 auto;
  padding: calc(var(--header-height) + 24px) 16px 40px;

  display: flex;
  flex-direction: column;
}

.panel-group{
  width: fit-content;
  margin: 0 auto;
}

.panel-row{
  display: flex;
  align-items: baseline;
  /* justify-content: center; */
  justify-content: flex-start;
  gap: 16px;
}

.panel-title{
  margin: 0;

  text-align: center;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.2;
}

.panel-label{
  margin: 0;

  font-size: 1rem;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
}

@media (max-width: 700px){
  .panel-row{
    flex-direction: column;
    align-items: stretch;
  }

  .panel-label{
    white-space: normal;
  }
}

/* Specific panel styles */
.panel--header{
  padding: 20px 20px;
}

.panel--alphabet,
.panel--character{
  padding: 5px 20px;
}

.panel--canvas{
  padding: 40px 40px 80px;
}

.panel--actions{
  padding: 20px 20px;
}

.panel--actions .panel-row{
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
}