:root{
  --paper: #f6f7f6;
  --paper-soft: #fbfbfb;

  --ink: #2f2f2f;
  --muted: #6e6e6e;

  --accent-soft: #d2c8b6;  
  --line: rgba(0,0,0,.06);

  --shadow1: 0 10px 26px rgba(0,0,0,.12);
  --shadow2: 0 36px 72px rgba(0,0,0,.16);
}

.hero{
  position: relative;
  padding: 10px 0 70px;
  min-height: 100vh;

  background: url("/image/kerkfull.jpg") center / cover no-repeat;
}

.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(rgba(0,0,0,.20), rgba(0,0,0,.34));
  z-index:0;
}

.hero__content{
  position: relative;
  z-index: 1;

  width: min(900px, 95%);
  margin: 30px auto;

  padding: 58px 66px;
  background: var(--paper);
  color: var(--ink);

  border-radius: 12px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow1), var(--shadow2);
}

.hero__content h1{
  margin: 0 0 14px;
  font-size: 2.15rem;
  font-weight: 600;
  letter-spacing: .2px;
}

.hero__content p{
  max-width: 720px;
  margin: 0 auto 16px;
  line-height: 1.75;
  font-size: 1.05rem;
  color: var(--muted);
}

.hero__content .intro{
  margin: 0 auto 34px;
}

@media (max-width: 768px){
  .hero__content{
    padding: 40px 28px;
  }
}



/* Elke memorium in zijn eigen container */
.memorium-item{
  width:100%;
}

/* Grid layout */
.memoriums-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:18px;
  margin-top:20px;
}

@media (max-width: 900px){
  .memoriums-grid{ grid-template-columns: 1fr; }
}

/* De echte kaart */
.memorium-card{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:16px;
  box-shadow:0 6px 20px rgba(0,0,0,.05);
  padding:16px;
  height:100%;
  display:flex;
  flex-direction:column;
}

/* Header */
.memorium-head{
  display:flex;
  gap:14px;
  align-items:flex-start;
}

/* Foto */
.memorium-photo{
  width:120px;
  height:120px;
  border-radius:14px;
  overflow:hidden;
  flex:0 0 120px;
  border:1px solid #eef0f3;
  background:#fafafa;
}

.memorium-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* Titel */
.memorium-title h2{
  margin:0;
  font-size:18px;
  line-height:1.25;
}

.memorium-date{
  margin:6px 0 0;
  font-size:12px;
  opacity:.75;
}

/* Body */
.memorium-body{
  margin-top:12px;
  font-size:14px;
  line-height:1.6;
  opacity:.95;
  border-top:1px solid #f0f1f3;
  padding-top:12px;
}