body {
  background-color: whitesmoke;
}
iconify-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: middle;
}

.nav-link {
  color: #FFFC;
}

.navbar .nav-link.active,
.nav-link:hover {
  color: #FFF;
}

/* Issue list */
.issue-grid {
  --column-width: 400px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--column-width)), 1fr));
  margin-block: 1rem;
  gap: 1rem;
}

.square {
  object-fit: cover;
  width: 100%;
  aspect-ratio: 1 / 1;
}

.issue-card-title {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.tag-list {
  display: flex;
  gap: 0.25em;
  flex-wrap: wrap;
  justify-content: end;
}

.issue-figure {
  display: block;
  position: relative;
  margin-bottom: 0;
}

.issue-figure > .btn {
  position: absolute;
  top: 1rem;
  right: 1rem;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.issue-figure:hover > .btn {
  opacity: 0.8;
}

.prose-editor > * {
  --body-bg: white;
  --border-color: #dee2e6;
  --primary: rgb(207, 207, 207);
}

.ProoseMirror > * {
  max-width: 100%;
}
/* 
.filter-form {
  border: 1px solid #0009;
  padding: 1em;
} */

.filter-grid {
  display: grid;
  gap: 1em;
  margin-block: 1em;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.filter {
  background-color: white;
}


/* Single Issue card */
.single-issue-card {
  display: grid;
  grid-template-areas:
    'body'
    'map'
    'image'
    'interventions';
  grid-template-columns: 1fr;
}

.single-issue-card .card-body {
  grid-area: body;
}
.single-issue-card .card-map {
  grid-area: map;
}
.single-issue-card .issue-figure {
  grid-area: image;
}

@media (min-width: 768px) {
  .single-issue-card {
    grid-template-areas:
      'body body'
      'map image'
      'interventions interventions';
    grid-template-columns: 1fr 1fr;
  }
}


/* Leaflet map aspect ratio */
.leaflet-map-container {
  aspect-ratio: 16/9;
}

@media (orientation: portrait) {
  .leaflet-map-container {
    aspect-ratio: 3/4;
  }
}