/* EJW Foundation – Light Content + Purple Dark Chrome
   Full drop-in replacement for /assets/css/styles.css
*/

:root{
  /* LIGHT CONTENT THEME */
  --bg:#ffffff;
  --surface:#f6f4fb;
  --card:#ffffff;
  --text:#101828;
  --muted:#475467;
  --border:rgba(16,24,40,.14);

  /* BRAND PURPLE */
  --purple:#6d28d9;
  --purple2:#4c1d95;
  --purpleSoft:#efe8ff;

  /* DARK CHROME (TOP + HEADER + FOOTER) */
  --dark:#0b0811;
  --dark2:#120c1c;
  --darkText:#f5f2fa;
  --darkMuted:rgba(245,242,250,.72);
  --darkBorder:rgba(255,255,255,.12);

  --shadow: 0 18px 45px rgba(16,24,40,.10);
  --shadow2: 0 10px 24px rgba(16,24,40,.10);

  --radius:22px;
  --container:1180px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Arial;
  color:var(--text);
  background:
    radial-gradient(900px 450px at 12% -10%, rgba(109,40,217,.10), transparent 60%),
    radial-gradient(900px 450px at 90% 8%, rgba(76,29,149,.08), transparent 55%),
    linear-gradient(180deg, #ffffff, #fbfaff 40%, #ffffff);
  line-height:1.55;
}

a{color:inherit;text-decoration:none}
a:hover{opacity:.95}
img{max-width:100%;display:block}
/* Ensure all cropped images anchor from centre-top */
img{object-position: 50% 0%;}

.container{width:min(var(--container), calc(100% - 32px)); margin-inline:auto}
.sr-only{position:absolute;left:-9999px}

/* =========================================================
   TOP BAR (PURPLE DARK)
========================================================= */

.topbar{
  position:sticky;
  top:0;
  z-index:1200;
  background:
    radial-gradient(900px 520px at 12% -40%, rgba(109,40,217,.45), transparent 60%),
    radial-gradient(900px 520px at 90% -30%, rgba(76,29,149,.35), transparent 60%),
    linear-gradient(180deg, rgba(11,8,17,.92), rgba(18,12,28,.92));
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--darkBorder);
}
.topbar-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 0; /* slightly taller */
}
.pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 10px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:999px;
  background:rgba(255,255,255,.06);
  color:var(--darkText);
}
.muted{color:var(--muted)}
.small{font-size:.9rem}
.topbar .muted{color:var(--darkMuted)}

.linkbtn{
  background:transparent;
  border:0;
  color:var(--darkText);
  font:inherit;
  padding:8px 10px;
  border-radius:10px;
  cursor:pointer;
}
.linkbtn:hover{background:rgba(255,255,255,.08)}

.donate-btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 14px;
  border-radius:14px;
  background: linear-gradient(135deg, var(--purple), var(--purple2));
  border:1px solid rgba(255,255,255,.18);
  box-shadow: 0 10px 22px rgba(109,40,217,.28);
  font-weight:800;
  color:#fff;
}
.donate-btn:hover{transform:translateY(-1px)}

/* =========================================================
   HEADER + NAV (PURPLE DARK)
========================================================= */

.site-header{
  position:sticky;
  top:56px; /* sits below topbar */
  z-index:1100;
  background: linear-gradient(180deg, rgba(18,12,28,.92), rgba(11,8,17,.88));
  border-bottom:1px solid var(--darkBorder);
}

.nav-wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 0;
  gap:18px;
}

.brand{display:flex; align-items:center; gap:12px; min-width: 260px}

/* Logo capsule (white background) */
.logo-mark.logo-image{
  height: 84px;
  min-width: 110px;
  padding: 8px 16px;
  border-radius: 999px;
  background:#ffffff;
  border:1px solid rgba(255,255,255,.35);
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
}

.logo-mark.logo-image img{
  height: 62px;
  width:auto;
  max-width: 280px;
  object-fit:contain;
  display:block;
}

.brand-name{
  font-size:1.05rem;
  font-weight:900;
  letter-spacing:.2px;
  color:var(--darkText);
}
.brand-sub{
  font-size:.9rem;
  color:var(--darkMuted);
  margin-top:-2px;
}

.nav{
  display:flex;
  gap:6px;
  align-items:center;
  flex-wrap:wrap;
}

.nav a{
  padding:10px 10px;
  border-radius:12px;
  color:rgba(245,242,250,.92);
  font-weight:700;
}
.nav a:hover{background:rgba(255,255,255,.08)}
.nav a.active{
  background: rgba(109,40,217,.18);
  border:1px solid rgba(109,40,217,.28);
}

.nav-toggle{
  display:none;
  width:44px;height:44px;border-radius:14px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
  cursor:pointer;
}
.nav-toggle span{
  display:block;
  width:18px;
  height:2px;
  background:var(--darkText);
  margin:4px auto;
  border-radius:2px;
}

.site-main{padding:18px 0 56px}

/* =========================================================
   WHO-STYLE HOME BANNER (uses /assets/img/banner.webp)
========================================================= */

.top-banner{
  position:relative;
  border-bottom:1px solid var(--border);
  background:
    linear-gradient(90deg, rgba(255,255,255,.94), rgba(255,255,255,.70), rgba(255,255,255,.94)),
    url("/assets/img/banner.webp");
  background-size:cover;
  background-position:center;
  z-index:1;
}

.top-banner::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(900px 520px at 12% 30%, rgba(109,40,217,.14), transparent 60%),
    radial-gradient(900px 520px at 85% 20%, rgba(76,29,149,.10), transparent 60%);
  pointer-events:none;
}

.top-banner-inner{
  position:relative;
  min-height:260px;
  padding:48px 0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  flex-wrap:wrap;
}

.tb-kicker{
  font-size:.78rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color: rgba(16,24,40,.60);
  font-weight:900;
}
.tb-quote{
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  font-weight:900;
  line-height:1.4;
  color:#1b1430;
  max-width:62ch;
}
.tb-by{color: rgba(16,24,40,.55); font-weight:900}
.tb-actions{display:flex; gap:10px; flex-wrap:wrap}

/* =========================================================
   HERO (LIGHT)
========================================================= */

.hero{
  position:relative;
  overflow:hidden;
  border-radius: clamp(18px, 3vw, 34px);
  background:
    radial-gradient(900px 520px at 18% 18%, rgba(109,40,217,.18), transparent 60%),
    radial-gradient(900px 520px at 85% 5%, rgba(76,29,149,.14), transparent 55%),
    linear-gradient(180deg, #ffffff, #fbfaff);
  border:1px solid var(--border);
  box-shadow: var(--shadow);
  margin-top:18px;
  z-index:1;
}

.hero-inner{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap:22px;
  padding: clamp(18px, 3.5vw, 42px);
}

.kicker{
  color: rgba(16,24,40,.74);
  font-weight:900;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-size:.78rem;
}
.hero h1{
  margin:.35rem 0 .75rem;
  font-size: clamp(2rem, 4vw, 3.05rem);
  line-height:1.05;
  letter-spacing:-.02em;
}
.lead{color:rgba(16,24,40,.78); font-size:1.05rem; max-width:62ch}

.hero-actions{display:flex; flex-wrap:wrap; gap:10px; margin-top:16px}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 16px;
  border-radius:16px;
  border:1px solid var(--border);
  background:#fff;
  font-weight:800;
  color:var(--text);
  box-shadow: 0 8px 18px rgba(16,24,40,.06);
}
.btn.primary{
  background: linear-gradient(135deg, var(--purple), var(--purple2));
  border-color: rgba(255,255,255,.30);
  color:#fff;
  box-shadow: 0 10px 24px rgba(109,40,217,.22);
}
.btn.ghost{
  background: rgba(109,40,217,.06);
  border-color: rgba(109,40,217,.18);
}
.btn.sm{padding:10px 14px; border-radius:14px; font-size:.95rem}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}

.hero-media{display:grid; gap:12px}
.media-card{
  border-radius: 22px;
  border:1px solid var(--border);
  background:#fff;
  overflow:hidden;
  box-shadow: var(--shadow2);
}
.media-grid{display:grid; grid-template-columns: 1fr 1fr; gap:12px}

.ratio{position:relative; width:100%; padding-top:70%; overflow:hidden}
.ratio.r169{padding-top:56.25%}
.ratio.r11{padding-top:100%}
.ratio img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position: 50% 0%; /* centre top */
}


.hero-quote{
  margin-top:0;
  padding:12px 14px;
  border-radius:18px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.86);
  box-shadow: 0 10px 20px rgba(16,24,40,.06);
}
.hero-quote p{margin:0; color:rgba(16,24,40,.88); font-weight:800}
.hero-quote .by{margin-top:6px; color:var(--muted); font-weight:900}

/* =========================================================
   SECTIONS + CARDS
========================================================= */

.section{margin-top:30px}
.section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:18px;
  margin-bottom:14px;
}
.section-head h2{margin:0; font-size:1.45rem}
.section-head p{margin:0; color:var(--muted); max-width:70ch}

.cards{display:grid; gap:14px; grid-template-columns: repeat(12,1fr)}
.card{
  grid-column: span 4;
  border-radius: var(--radius);
  border:1px solid var(--border);
  background:#fff;
  box-shadow: var(--shadow2);
  overflow:hidden;
}
.card .pad{padding:16px}
.card h3{margin:0 0 8px; font-size:1.08rem}
.card p{margin:0; color:rgba(16,24,40,.78)}
.card .meta{margin-top:12px; color:var(--muted); font-size:.92rem}

.blog-grid{display:grid; gap:14px; grid-template-columns: repeat(12,1fr)}
.post-card{
  grid-column: span 4;
  border-radius: var(--radius);
  border:1px solid var(--border);
  overflow:hidden;
  background:#fff;
  box-shadow: var(--shadow2);
}
.post-card .pad{padding:16px}
.post-card h3{margin:0 0 8px}
.post-card .meta{color:var(--muted); font-size:.92rem}
.post-card p{margin:10px 0 0; color:rgba(16,24,40,.76)}
.post-card .readmore{margin-top:12px; display:inline-flex; gap:8px; align-items:center; color:var(--purple); font-weight:900}

.notice{
  border-radius:18px;
  border:1px solid rgba(109,40,217,.22);
  background: rgba(109,40,217,.06);
  padding:12px 14px;
  margin:14px 0;
}

/* =========================================================
   PAGE HERO (Non-home pages)
========================================================= */

.page-hero{
  position:relative;
  background-image: var(--hero-img);
  background-size:cover;
  background-position:center;
  border-bottom:1px solid var(--border);
  min-height:240px;
  z-index:1;
}
.page-hero .overlay{
  position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(255,255,255,.96), rgba(255,255,255,.62), rgba(255,255,255,.92)),
    radial-gradient(700px 320px at 20% 25%, rgba(109,40,217,.18), transparent 60%);
}
.page-hero-inner{position:relative; padding:38px 0}
.page-hero h1{margin:8px 0 0; font-size: clamp(2rem, 4vw, 2.8rem); letter-spacing:-.02em}
.page-hero .lead{max-width:80ch}

/* =========================================================
   PANELS / SPLITS / PROSE (inner pages)
========================================================= */

.split{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:16px;
  align-items:stretch;
}

.panel{
  border-radius: var(--radius);
  border:1px solid var(--border);
  background:#fff;
  box-shadow: var(--shadow2);
  overflow:hidden;
}
.panel .pad{padding:18px}

.prose{max-width:82ch}
.prose h2{margin-top:0}
.prose p{color: rgba(16,24,40,.78)}
.prose a{color:var(--purple); text-decoration:underline; font-weight:800}

.list{margin:10px 0 0; padding-left:18px; color: rgba(16,24,40,.80)}
.list li{margin:8px 0}

/* =========================================================
   GALLERY GRID (About EJ)
========================================================= */

.gallery-grid{
  display:grid;
  grid-template-columns: repeat(12,1fr);
  gap:12px;
}

.gallery-grid .g{
  grid-column: span 4;
  border-radius:18px;
  border:1px solid var(--border);
  background:#fff;
  box-shadow: var(--shadow2);
  overflow:hidden;
}

.gallery-grid .g .ratio{padding-top:78%}

/* =========================================================
   FORMS
========================================================= */

.form label{display:block; margin:12px 0 6px; color:rgba(16,24,40,.86); font-weight:900}
.form input,.form textarea,.form select{
  width:100%;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid var(--border);
  background:#fff;
  color:var(--text);
  outline:none;
}
.form input:focus,.form textarea:focus{
  border-color: rgba(109,40,217,.45);
  box-shadow: 0 0 0 5px rgba(109,40,217,.14);
}
.form .grid2{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.form .form-row{display:flex; gap:12px; align-items:center; margin-top:14px}
.form button{
  padding:12px 16px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.35);
  background: linear-gradient(135deg, var(--purple), var(--purple2));
  color:#fff;
  font-weight:950;
  cursor:pointer;
}
.form button:hover{transform:translateY(-1px)}

.newsletter{
  display:flex;
  gap:10px;
  margin-top:10px;
  align-items:stretch;
}
.newsletter input{
  flex:1;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--border);
  background:#fff;
  color:var(--text);
}
.newsletter button{
  padding:10px 14px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.35);
  background: linear-gradient(135deg, var(--purple), var(--purple2));
  color:#fff;
  font-weight:900;
  cursor:pointer;
}

/* =========================================================
   FOOTER (PURPLE DARK)
========================================================= */

.footer{
  border-top:1px solid var(--darkBorder);
  background:
    radial-gradient(900px 520px at 12% -40%, rgba(109,40,217,.35), transparent 60%),
    radial-gradient(900px 520px at 90% -30%, rgba(76,29,149,.25), transparent 60%),
    linear-gradient(180deg, rgba(11,8,17,.98), rgba(18,12,28,.98));
  color: var(--darkText);
  padding:30px 0 34px;
  margin-top: 10px;
}
.footer-grid{
  display:grid;
  gap:18px;
  grid-template-columns: 1.2fr .8fr 1fr;
}
.footer-links{list-style:none; padding:0; margin:10px 0 0}
.footer-links li{margin:10px 0}
.footer-links a{color:rgba(245,242,250,.88)}
.footer-links a:hover{color:#e9d5ff}
.footer-brand{display:flex; gap:12px; align-items:center}
.footer-actions{display:flex; gap:10px; margin:12px 0}
.fineprint{margin-top:12px; color:rgba(245,242,250,.72); font-size:.92rem}
.footer-legal{display:flex; gap:10px; align-items:center; margin-top:12px; color:rgba(245,242,250,.72)}
.footer-legal a{color:rgba(245,242,250,.82)}

.footer .newsletter input{
  border:1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  color: var(--darkText);
}
.footer .newsletter input::placeholder{color: rgba(245,242,250,.60)}
.footer .newsletter button{
  border-color: rgba(255,255,255,.18);
  box-shadow: 0 10px 24px rgba(109,40,217,.22);
}

/* =========================================================
   MODAL
========================================================= */

.modal{position:fixed; inset:0; display:none; z-index:3000}
.modal[aria-hidden="false"]{display:block}
.modal-backdrop{position:absolute; inset:0; background: rgba(16,24,40,.45)}
.modal-card{
  position:relative;
  width:min(720px, calc(100% - 28px));
  margin:70px auto;
  border-radius:24px;
  border:1px solid var(--border);
  background:#fff;
  box-shadow: var(--shadow);
  padding:18px 18px 16px;
}
.modal-close{
  position:absolute; right:14px; top:12px;
  width:38px;height:38px;border-radius:14px;
  border:1px solid var(--border);
  background: rgba(16,24,40,.03);
  color:var(--text);
  cursor:pointer;
  font-size:20px;
}

/* =========================================================
   TABLES / BADGES
========================================================= */

.table{width:100%; border-collapse:collapse; margin-top:12px}
.table th,.table td{padding:10px; border-bottom:1px solid var(--border); text-align:left}
.table th{color:rgba(16,24,40,.90); font-weight:950}

.badge{
  display:inline-flex;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--border);
  background: rgba(16,24,40,.03);
  color:rgba(16,24,40,.88);
  font-size:.86rem;
}

/* =========================================================
   MOBILE NAV (SINGLE SYSTEM — FULLSCREEN OVERLAY)
========================================================= */

@media (max-width: 920px){
  .hero-inner{grid-template-columns: 1fr}
  .cards .card{grid-column: span 6}
  .post-card{grid-column: span 6}
  .footer-grid{grid-template-columns: 1fr}
  .top-banner-inner{flex-direction:column}
  .split{grid-template-columns: 1fr}
  .gallery-grid .g{grid-column: span 6}
}

@media (max-width: 960px){
  .nav-toggle{display:block; position:relative; z-index:2200}

  .nav{
    position:fixed;
    inset:0;
    background: rgba(20,10,30,.96);
    backdrop-filter: blur(10px);
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:10px;
    padding: 110px 24px 24px;
    transform: translateX(100%);
    transition: transform .35s ease;
    z-index:2100;
    overflow-y:auto;
    -webkit-overflow-scrolling: touch;
  }
  .nav.open{transform: translateX(0)}
  .nav a{
    width:100%;
    font-size:1.15rem;
    font-weight:800;
    padding:14px 0;
    color:#fff;
  }
  .nav a:hover{background: rgba(255,255,255,.08); border-radius:12px; padding-left:12px}
  body.nav-open{overflow:hidden}
}

@media (max-width: 720px){
  .cards .card{grid-column: span 12}
  .post-card{grid-column: span 12}
  .form .grid2{grid-template-columns: 1fr}
  .newsletter{flex-direction:column}
  .gallery-grid .g{grid-column: span 12}

  .top-banner-inner{min-height:auto; padding:28px 0}
}

@media (max-width: 920px){
  .top-banner-inner{min-height:180px; padding:36px 0}
}
/* =========================================================
   RESOURCE MOBILISATION SECTION (Dark Purple Band)
========================================================= */

.rm-section{
  margin-top: 34px;
  padding: 46px 0;
  color: rgba(255,255,255,.92);
  background:
    radial-gradient(900px 520px at 10% 0%, rgba(109,40,217,.42), transparent 60%),
    radial-gradient(900px 520px at 90% 30%, rgba(76,29,149,.34), transparent 60%),
    linear-gradient(180deg, rgba(11,8,17,.98), rgba(18,12,28,.98));
  border-top: 1px solid rgba(255,255,255,.10);
  border-bottom: 1px solid rgba(255,255,255,.10);
}

.rm-inner{position:relative}

.rm-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:18px;
  margin-bottom: 18px;
}

.rm-kicker{
  font-size:.78rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-weight:900;
  color: rgba(233,213,255,.88);
}

.rm-title{
  margin:8px 0 8px;
  font-size: clamp(1.8rem, 3.6vw, 2.4rem);
  letter-spacing: -.02em;
  color:#fff;
}

.rm-lead{
  margin:0;
  max-width: 82ch;
  color: rgba(245,242,250,.80);
}

.rm-ctas{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.rm-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 16px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.94);
  font-weight: 900;
  box-shadow: 0 12px 28px rgba(0,0,0,.22);
}

.rm-btn.primary{
  background: linear-gradient(135deg, var(--purple), var(--purple2));
  border-color: rgba(255,255,255,.20);
}

.rm-btn.ghost{
  background: rgba(233,213,255,.10);
  border-color: rgba(233,213,255,.22);
}

.rm-btn:hover{transform: translateY(-1px)}
.rm-btn:active{transform: translateY(0)}

.rm-grid{
  display:grid;
  grid-template-columns: 1fr 1fr 1.1fr;
  gap:14px;
  align-items:stretch;
}

.rm-card{
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(10px);
  box-shadow: 0 16px 40px rgba(0,0,0,.25);
  padding: 18px;
}

.rm-card h3{
  margin:0 0 10px;
  color:#fff;
  letter-spacing: -.01em;
}

.rm-list{
  margin:0;
  padding-left: 18px;
  color: rgba(245,242,250,.82);
}

.rm-list li{margin: 10px 0}

.rm-link{
  display:inline-flex;
  margin-top: 12px;
  font-weight: 900;
  color: rgba(233,213,255,.95);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.rm-collage{
  position:relative;
  border-radius: 22px;
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 16px 40px rgba(0,0,0,.32);
  min-height: 360px;
  background: rgba(255,255,255,.04);
}

.rm-photo{
  position:absolute;
  overflow:hidden;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 12px 26px rgba(0,0,0,.30);
  background: rgba(255,255,255,.05);
}

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

.rm-a{left:14px; top:14px; width:46%; height:44%}
.rm-b{right:14px; top:14px; width:46%; height:30%}
.rm-c{right:14px; bottom:14px; width:46%; height:52%}
.rm-d{left:14px; bottom:14px; width:46%; height:44%}

.rm-overlay{
  position:absolute;
  left: 14px;
  right: 14px;
  bottom: 14px;
  padding: 14px 14px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.14);
  background: linear-gradient(180deg, rgba(10,7,16,.58), rgba(10,7,16,.78));
  backdrop-filter: blur(10px);
}

.rm-overlay-title{
  font-weight: 950;
  letter-spacing: -.01em;
  margin-bottom: 10px;
  color:#fff;
}

.rm-overlay-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

/* Responsive */
@media (max-width: 980px){
  .rm-head{align-items:flex-start; flex-direction:column}
  .rm-ctas{justify-content:flex-start}
  .rm-grid{grid-template-columns: 1fr}
  .rm-collage{min-height: 320px}
  .rm-a,.rm-b,.rm-c,.rm-d{position:relative; inset:auto; width:auto; height:auto; margin: 12px}
  .rm-collage{padding: 6px}
  .rm-overlay{position:relative; left:auto; right:auto; bottom:auto; margin: 12px}
}