/* Utility classes */

/* Hide elements on mobile, show on tablet and larger */
.hide-mobile {
  display: none;
}

@media (min-width: 768px) {
  .hide-mobile {
    display: table-cell;
  }
}

.w-full {
  width: 100%;
}
.max-w-full {
  max-width: 100%;
}
.h-full {
  height: 100%;
}
.flex {
  display: flex;
}
.flex-col {
  flex-direction: column;
}
.flex-1 {
  flex: 1;
}
.justify-content-center {
  justify-content: center;
}
.place-self-center {
  place-self: center;
}
.items-center {
  align-items: center;
}
.text-center {
  text-align: center;
}

.text-positive {
  color: var(--wa-color-success-on-quiet);
}
.text-negative {
  color: var(--wa-color-danger-on-quiet);
}
.text-muted {
  color: var(--wa-color-neutral-500);
}

[hidden] {
  display: none;
}

/* Masonry layout using CSS columns */
.masonry-columns {
  columns: 1;
  column-gap: var(--size-6);
}

@media (min-width: 768px) {
  .masonry-columns {
    columns: 2;
  }
}

@media (min-width: 1024px) {
  .masonry-columns {
    columns: 3;
  }
}

.masonry-item {
  break-inside: avoid;
  margin-block-end: var(--size-6);
}

/* Email verification banner */
.email-verification-banner {
  margin: var(--size-4);
}