/*
 * Homepage archive cards
 * Each card uses a full-field visual so the three routes carry equal weight.
 */
.feature::before {
  inset: 0;
  height: auto;
  opacity: 1;
  filter: none;
  background-color: #d5ceb5;
  background-repeat: no-repeat;
  transition: transform .45s ease, filter .3s ease;
}

.feature::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(238,232,210,.95) 0%, rgba(238,232,210,.78) 53%, rgba(238,232,210,.28) 100%),
    linear-gradient(0deg, rgba(231,223,199,.8), rgba(231,223,199,.08));
}

.feature:first-child::before {
  inset: 0;
  opacity: 1;
  background-image: url("/images/MapMKD01x800.jpg");
  background-position: center;
  background-size: cover;
}

.feature:nth-child(2)::before {
  background-image:
    url("/images/Sunbane.gif"),
    url("/images/astrus.gif"),
    url("/images/Maboc.gif"),
    radial-gradient(circle at 72% 58%, #878564 0%, #c9c2a5 47%, #ddd5bd 75%);
  background-position:
    63% 100%,
    87% 95%,
    105% 106%,
    center;
  background-size:
    41% auto,
    38% auto,
    43% auto,
    cover;
}

.feature:nth-child(3)::before {
  background-image: url("/images/Joustmat_Atlantean800.jpg");
  background-position: center;
  background-size: cover;
}

.feature:nth-child(3)::after {
  background:
    linear-gradient(90deg, rgba(238,232,210,.96) 0%, rgba(238,232,210,.78) 50%, rgba(238,232,210,.25) 100%),
    repeating-radial-gradient(circle at 86% 68%, transparent 0 15px, rgba(126,42,29,.17) 16px 18px);
}

.feature > * {
  z-index: 1;
}

.feature:hover::before {
  transform: scale(1.035);
  filter: saturate(1.15) contrast(1.04);
}

@media (max-width: 800px) {
  .feature:nth-child(2)::before {
    background-position: 67% 100%, 86% 95%, 102% 104%, center;
    background-size: 31% auto, 29% auto, 33% auto, cover;
  }
}