.figure {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 10px;
  margin: 40px 0;
}

.figure-image {
  display: contents;
}

.figure-image img {
  border-radius: var(--rounded);
  overflow: hidden;
  box-shadow: var(--shadow);
}

.figure-caption {
  font-style: normal;
  text-align: justify;
}

.figure-caption:empty {
  display: none;
}

.image-container {
  position: relative;
  width: 100%;
  padding-top: 66.66%; /* 3:2 aspect ratio */
  overflow: hidden;
}

.image-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* or 'contain' depending on your goal */
}

.map-container {
  position: relative;
  width: 100%;
  padding-top: 66.66%;
  overflow: hidden;
  border-radius: var(--rounded);
  box-shadow: var(--shadow);
}

.map-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.map-caption {
  text-align: center;
  font-size: var(--small);
  font-family: var(--body);
  margin-top: 0.5rem;
  color: var(--text-muted);
}

.special-margin {
  margin: -10px 0; /* or whatever value you want */
}

/*# sourceMappingURL=figure.css.map */