/* =========================================================
   REVEAL
========================================================= */

.reveal {
  position: relative;
}

.reveal-grid {
  display: grid;

  grid-template-columns:
    repeat(
      auto-fit,
      minmax(240px, 1fr)
    );

  gap:
    24px;
}

.reveal-item {
  padding:
    32px;

  border:
    1px solid var(--border-light);

  border-radius:
    20px;

  background:
    var(--light);
}

.reveal-item summary {
  cursor:
    pointer;

  list-style:
    none;
}

.reveal-item summary::-webkit-details-marker {
  display:
    none;
}

.reveal-title {
  margin:
    0;

  transition:
    opacity .2s ease;
}

.reveal-content {
  margin-top:
    24px;
}

.reveal-item[open] .reveal-title {
  opacity:
    1;
}