/* A small event wall: the chosen background, the title tile and a few example
   wishes. Create page, manage page and the landing page. */

.wall-preview {
  container-type: inline-size;
  overflow: hidden;
  border-radius: 22px;
  background-position: center;
  background-size: cover;
  box-shadow: 0 18px 40px rgba(42, 16, 59, 0.18);
  transition: background-color 0.3s ease;
}

.wall-preview-grid {
  padding: 6cqw 5.4cqw 2.4cqw;
  columns: 2;
  column-gap: 3.6cqw;
}

.edit-layout:has(.wall-preview-wrap) {
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
}

@media (max-width: 860px) {
  .edit-layout:has(.wall-preview-wrap) { grid-template-columns: 1fr; }
  .edit-preview.wall-preview-wrap { max-width: none; }
}

.wall-preview .fw-kudo {
  break-inside: avoid;
  display: flex;
  flex-direction: column;
  margin: 0 0 3.6cqw;
  overflow: hidden;
  border-radius: 1.8cqw;
  background: #fff;
  box-shadow: 0 0.6cqw 2.4cqw rgba(42, 16, 59, 0.16);
}

.wall-preview .fw-kudo-pic img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.wall-preview .fw-kudo-body {
  padding: 3cqw 3.4cqw;
}

.wall-preview .fw-kudo-body p {
  margin: 0;
  font-size: 3.4cqw;
  line-height: 1.4;
  color: #2a103b;
}

.wall-preview .fw-kudo-from {
  display: block;
  margin-top: 1.6cqw;
  font-size: 2.8cqw;
  font-weight: 700;
  color: #6b5a75;
}

.wall-preview .fw-kudo-title .fw-kudo-body {
  padding: 5cqw 3.6cqw;
  text-align: center;
}

.wall-preview .fw-wall-title {
  margin: 0;
  font-family: var(--serif, Georgia, serif);
  font-size: 5.4cqw;
  font-weight: 600;
  line-height: 1.15;
  color: #2a103b;
  overflow-wrap: anywhere;
}

.wall-preview .fw-wall-sub {
  margin: 1.8cqw 0 0;
  font-size: 3cqw;
  line-height: 1.4;
  color: #6b5a75;
}

.wall-preview-wrap .cover-edit-hint {
  margin-top: 14px;
}