.map-card {
  border: 1px solid #ddd;
  position: relative;
}
.map-card .map-card-media-top {
  height: 200px;
}
.map-card .map-card-media-top img {
  height: 200px;
  width: 100%;
  object-fit: cover;
}
.map-card .map-card-body {
  padding: 10px;
}
.map-card .map-card-body .map-card-title {
  font-size: 1.25rem;
  font-weight: 400;
  margin-bottom: 0.75rem;
}
.map-card .ribbon {
  position: absolute;
  right: var(--right, 10px);
  top: var(--top, -3px);
  filter: drop-shadow(2px 3px 2px rgba(0, 0, 0, 0.5));
}
.map-card .ribbon > .content {
  color: white;
  font-size: 1.25rem;
  text-align: center;
  font-weight: 400;
  background: var(--color, #3caf0e) linear-gradient(45deg, rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 0.25) 100%);
  padding: 6px 2px 4px;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 8px), 0 100%);
  width: var(--width, 32px);
  min-height: var(--height, 50px);
  transition: clip-path 1s, padding 1s, background 1s;
}
.map-card .ribbon > .content svg {
  position: relative;
  left: -1px;
}