/* =========================================================
   Artwork Detail (body.page-artwork)
   Fix: Breadcrumbs sichtbar + viewport-zentriert + harmonische Abstände
   (keine runden Ecken)
========================================================= */

/* -----------------------------
   Base tokens (scoped) + Page BG
----------------------------- */
.page-artwork{
  --bg: #070707;
  --panel: rgba(255,255,255,0.03);
  --panel2: rgba(0,0,0,0.38);
  --line: rgba(200,161,90,0.18);
  --line2: rgba(255,255,255,0.08);
  --text: rgba(255,255,255,0.90);
  --muted: rgba(255,255,255,0.62);
  --muted2: rgba(255,255,255,0.42);
  --gold: #c8a15a;
  --gold-ink: rgba(200,161,90,0.92);

  --shadow: 0 18px 80px rgba(0,0,0,0.78);
  --shadow2: 0 10px 40px rgba(0,0,0,0.66);

  /* KEINE runden Ecken */
  --radius: 0px;

  /* EIN einziger Offset unter dem fixed Header */
  --header-offset: 92px; /* Desktop meist 84–104; starte mit 92 */

  background:
    radial-gradient(1200px 700px at 55% -10%, rgba(200,161,90,0.10), transparent 65%),
    radial-gradient(900px 600px at 15% 10%, rgba(255,255,255,0.05), transparent 70%),
    var(--bg);
  color: var(--text);
}


/* -----------------------------
   MAIN: nur hier wird unter dem Header "Platz gemacht"
   (damit Breadcrumb-Bar garantiert sichtbar ist)
----------------------------- */
.page-artwork main.artwork{
  padding-top: var(--header-offset);
  padding-bottom: 50px;
}

/* Wichtig: keine alten .artwork padding-top Regeln mehr! */
.page-artwork .artwork{
  padding: 0;
  margin: 0;
}


/* -----------------------------
   HERO: Abstand nach oben reduzieren (du wolltest weniger "Luft")
----------------------------- */
.page-artwork .artwork-hero{
  padding: 0;            /* killt das globale section-padding oben+unten */
  margin-top: 0;
  margin-bottom: 40px;
}


/* HERO layout (Basis) */
.page-artwork .artwork-hero{
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 26px;
  align-items: start;
}

@media (max-width: 980px){
  .page-artwork{ --header-offset: 82px; }
  .page-artwork .artwork-hero{
    grid-template-columns: 1fr;
  }
  .page-artwork .artwork-meta{ order: 2; }
  .page-artwork .artwork-main{ order: 1; }
}

@media (max-width: 720px){
  .page-artwork{ --header-offset: 74px; }
  .page-artwork .artwork-crumbbar .container{
    padding-left: 16px;
    padding-right: 16px;
  }
}


/* -----------------------------
   Meta card (left)
----------------------------- */
.page-artwork .artwork-meta{
  padding: 22px;
  border-radius: var(--radius2);
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(0,0,0,0.42));
  border: 1px solid rgba(200,161,90,0.12);
  box-shadow: var(--shadow2);
  position: relative;
  overflow: hidden;
}
.page-artwork .artwork-meta:before{
  content:"";
  position:absolute;
  inset:-1px;
  pointer-events:none;
  background: radial-gradient(800px 200px at 10% 0%, rgba(200,161,90,0.14), transparent 60%);
  opacity: 0.9;
}

.page-artwork .artwork-meta .kicker{
  margin: 0 0 10px;
  color: rgba(200,161,90,0.95);
  text-transform: uppercase;
  letter-spacing: 0.28em;
  font-size: 0.74rem;
}
.page-artwork .artwork-meta h1{
  margin: 0 0 8px;
  font-size: clamp(2.05rem, 3.5vw, 3.05rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
	
	 overflow-wrap: anywhere;
  word-break: keep-all;   /* fallback */
  hyphens: auto;
}
.page-artwork .artwork-meta .subline{
  margin: 0 0 16px;
  color: rgba(255,255,255,0.70);
  letter-spacing: 0.02em;
  line-height: 1.5;
}

/* short description (lead) */
.page-artwork .artwork-meta .lead{
  margin: 0 0 18px;
  color: rgba(255,255,255,0.80);
  line-height: 1.75;
  max-width: 52ch;
}

/* -----------------------------
   Buttons (more premium)
----------------------------- */
.page-artwork .actions{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin: 2px 0 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}

.page-artwork a.btn-primary,
.page-artwork a.btn-ghost{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 0px;
  text-decoration: none;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  font-size: 0.78rem;
  line-height: 1;
  min-height: 44px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease, color .18s ease;
  will-change: transform;
}

.page-artwork a.btn-primary{
  color: rgba(10,10,10,0.95);
  background: linear-gradient(180deg, rgba(200,161,90,0.95), rgba(200,161,90,0.78));
  border: 1px solid rgba(200,161,90,0.55);
  box-shadow: 0 14px 45px rgba(200,161,90,0.18), 0 12px 42px rgba(0,0,0,0.65);
}
.page-artwork a.btn-primary:hover{
  transform: translateY(-1px);
  box-shadow: 0 18px 60px rgba(200,161,90,0.22), 0 18px 55px rgba(0,0,0,0.72);
}

.page-artwork a.btn-ghost{
  color: rgba(255,255,255,0.82);
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.10);
}
.page-artwork a.btn-ghost:hover{
  transform: translateY(-1px);
  border-color: rgba(200,161,90,0.22);
  box-shadow: 0 14px 40px rgba(0,0,0,0.55);
}
/* -----------------------------
   Facts (Artworks – Datenzeilen)
----------------------------- */
.page-artwork .facts{
  margin: 16px 0 10px;
  display: grid;
  grid-template-columns: 1fr 1fr;   /* zwei Spalten (links/rechts) */
  gap: 0;
  border-top: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

/* jede Zeile: Label + Wert */
.page-artwork .facts > div{
  display: grid;
  grid-template-columns: 80px 1fr;  /* links Label, rechts Wert */
  column-gap: 12px;
  
  padding: 12px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  min-width: 0;
}

.page-artwork .facts > div:nth-last-child(-n+2){
  border-bottom: 0;
}
.page-artwork .facts dt{
  width: 80px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  margin: 0;
  color: rgba(200,161,90,0.90);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 0.72rem;
  overflow-wrap: anywhere;
  line-height: 1.2;          /* NEU */
}

.page-artwork .facts dd{
  flex: 1;
  margin: 0;
  color: rgba(255,255,255,0.82);
  text-align: left;
  min-width: 0;
  overflow-wrap: anywhere;
  line-height: 1.4;          /* NEU – überschreibt global 1.7 */
}


.page-artwork .facts .facts-nowrap{
  white-space: nowrap;
}

@media (max-width: 980px){
  .page-artwork .facts{
    grid-template-columns: 1fr;
  }
  .page-artwork .facts > div{
    grid-template-columns: 120px 1fr;
  }
}



/* -----------------------------
   Keywords (subtle chips)
----------------------------- */
.page-artwork .artwork-keywords{
  list-style: none;
  padding: 10px 0 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.page-artwork .artwork-keywords li{
  padding: 7px 10px;
  border-radius: 0px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.02);
  color: rgba(255,255,255,0.55);
  font-size: 0.78rem;
  letter-spacing: 0.01em;
}



/* =========================================================
   NEXT / PREV (Artwork Detail) — Luxury 2-line
   (ersetzt deinen kompletten bestehenden Block)
========================================================= */

.page-artwork .artwork-nextprev{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 16px;
  align-items: start;
}

/* Card: ruhiger, weniger UI-Box, mehr “concierge” */
.page-artwork .np{
  display: block;
  text-decoration: none;
  padding: 14px 16px;

  border: 1px solid rgba(200,161,90,0.12);
  background:
    radial-gradient(700px 220px at 18% 0%, rgba(200,161,90,0.10), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,0.018), rgba(0,0,0,0.44));
  box-shadow: 0 0 18px rgba(0,0,0,0.38);

  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}

.page-artwork .np:hover{
  border-color: rgba(200,161,90,0.24);
  background:
    radial-gradient(700px 220px at 18% 0%, rgba(200,161,90,0.13), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.50));
  transform: translateY(-1px);
}

.page-artwork .np-prev{ text-align: left; }
.page-artwork .np-next{ text-align: right; justify-self: end; }

/* 1. Zeile: Label */
.page-artwork .np-label{
  display: block;
  color: rgba(200,161,90,0.90);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 0.72rem;
  margin-bottom: 8px;
  opacity: 0.95;
}

/* Pfeile (bleiben automatisch) */
.page-artwork .np-prev .np-label::before{ content:"← "; }
.page-artwork .np-next .np-label::after{ content:" →"; }

/* 2. Zeile: Titel — elegant, max 2 Zeilen */
.page-artwork .np-title{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;       /* 2 Zeilen */
  overflow: hidden;

  color: rgba(255,255,255,0.86);
  font-size: 0.96rem;
  line-height: 1.35;
}

/* Disabled */
.page-artwork .np-disabled{
  border: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.02);
  min-height: 66px;
  opacity: 0.18;
}

/* Mobile */
@media (max-width: 720px){
  .page-artwork .artwork-nextprev{
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .page-artwork .np-next{
    text-align: left;
    justify-self: start;
  }
  /* optional: Pfeil-Logik fürs Mobile (wie bei dir) */
  .page-artwork .np-next .np-label::after{ content:""; }
  .page-artwork .np-next .np-label::before{ content:"→ "; }
}



/* -----------------------------
   Media column (right): main + thumbs
----------------------------- */
.page-artwork .artwork-media{
  min-width: 0;
}

/* Main image frame (no runaway / no sticky) */
.page-artwork .artwork-main{
  margin: 0;
  border-radius: var(--radius2);
  overflow: hidden;
  border: 1px solid rgba(200,161,90,0.12);
  background: rgba(0,0,0,0.35);
  box-shadow: var(--shadow);
  position: relative;
}
.page-artwork .artwork-main:before{
  content:"";
  position:absolute;
  inset: 0;
  pointer-events:none;
  background: radial-gradient(900px 400px at 35% 10%, rgba(200,161,90,0.16), transparent 60%);
  mix-blend-mode: screen;
  opacity: 0.55;
}
.page-artwork .artwork-main img{
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
}

/* Thumbnails strip (lux) */
.page-artwork .artwork-thumbs{
  margin-top: 12px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.page-artwork .artwork-thumb{
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.02);
  border-radius: 0px;
  overflow: hidden;
  padding: 0;
  cursor: pointer;
  width: 92px;
  height: 72px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.55);
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.page-artwork .artwork-thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(1.02);
  opacity: 0.92;
}
.page-artwork .artwork-thumb:hover{
  transform: translateY(-1px);
  border-color: rgba(200,161,90,0.22);
  box-shadow: 0 14px 46px rgba(0,0,0,0.68);
}
.page-artwork .artwork-thumb[aria-current="true"]{
  border-color: rgba(200,161,90,0.55);
  box-shadow: 0 18px 60px rgba(200,161,90,0.10), 0 18px 55px rgba(0,0,0,0.72);
}
.page-artwork .thumb-label{
  margin-top: 6px;
  font-size: 0.72rem;
  color: rgba(255,255,255,0.55);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* -----------------------------
   Gallery section (detail / room) — premium modules
----------------------------- */
.page-artwork .artwork-gallery{
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,0.06);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.page-artwork .artwork-gallery figure{
  margin: 0;
  border-radius: var(--radius2);
  overflow: hidden;
  border: 1px solid rgba(200,161,90,0.12);
  background: rgba(0,0,0,0.35);
  box-shadow: var(--shadow2);
}
.page-artwork .artwork-gallery img{
  display: block;
  width: 100%;
  height: auto;
}
.page-artwork .artwork-gallery figcaption{
  padding: 15px 14px;
  color: rgba(200,161,90,0.85);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-size: 0.72rem;
  background: linear-gradient(180deg, rgba(0,0,0,0.08), rgba(0,0,0,0.35));
}

@media (max-width: 980px){
  .page-artwork .artwork-gallery{
    grid-template-columns: 1fr;
  }
}

/* =============================
   EDITORIAL + CTA (Luxury Layout)
   - Desktop: 2 Spalten (Text links, CTA rechts)
   - Mobile: untereinander
   - Beide starten oben auf gleicher Höhe
   - Weniger Abstand zur vorherigen Section
============================= */

/* Wrapper: Abstand zur vorherigen Section reduzieren */
.page-artwork .artwork-editorial{
  margin-top: 10px;          /* kleinerer Abstand nach oben */
  padding: 0;
}

/* Grid-Anordnung */
.page-artwork .editorial-grid{
  display: grid;
  grid-template-columns: 1fr; /* mobile */
  gap: 18px;                  /* etwas kompakter */
  align-items: start;         /* wichtig: beide oben bündig */
}

@media (min-width: 980px){
  .page-artwork .editorial-grid{
    grid-template-columns: minmax(0, 1fr) 360px; /* Text | CTA */
    gap: 18px;
  }

  /* CTA bleibt elegant sichtbar */
  .page-artwork .artwork-cta{
    position: sticky;
    top: calc(var(--header-offset) + 16px);
    align-self: start;        /* sicher oben starten */
  }
}
/* =============================
   ARTWORK STORY – Luxury Editorial (clean)
   Ersetzt deinen kompletten artwork-story Block
============================= */

/* wichtig: artwork-story ist <section> -> erbt globale section-Regeln */
.page-artwork section.artwork-story{
  padding: 0;
  margin: 0;
  max-width: none;
  justify-self: start;

  /* macht die linke Spalte editorial-schöner (nicht zu breit) */
  width: 100%;
  max-width: 760px; /* Satzspiegel: wirkt sofort hochwertiger */
}

.page-artwork .artwork-story h2{
  margin: 0 0 14px;
  color: rgba(200,161,90,0.92);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 0.92rem;
}

/* keine fette Box – nur eine ruhige Fläche + feiner Akzent */
.page-artwork .artwork-story .description{
  padding: 0 0 0 40px;               /* Platz für Akzentlinie */
  border-left: 1px solid rgba(200,161,90,0.22);

  background: none;
  border-radius: 0;
  box-shadow: none;
}

/* Text-Rhythmus und Lesbarkeit */
.page-artwork .artwork-story .description p{
  margin: 0 0 16px;
  color: rgba(255,255,255,0.82);
  line-height: 1.95;
  max-width: none;                  /* Satzspiegel steuert die Story-Box */
}

/* Lead subtil, ohne “fette Kiste”-Effekt */
.page-artwork .artwork-story .description p:first-child{
  color: rgba(255,255,255,0.90);
  font-size: 1.02rem;
}

.page-artwork .artwork-story .description p:last-child{
  margin-bottom: 0;
}

/* Mobile: etwas weniger Einzug */
@media (max-width: 720px){
  .page-artwork .artwork-story .description{
    padding-left: 16px;
  }
}


/* --- CTA (Concierge) --- */
.page-artwork .artwork-cta{
  margin: 0;  
	padding-top: 20px;
	
}

.page-artwork .cta-box{
  padding: 42px;
  border-radius: var(--radius2);
  border: 1px solid rgba(200,161,90,0.16);
  background:
    radial-gradient(900px 260px at 18% 0%, rgba(200,161,90,0.13), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,0.03), rgba(0,0,0,0.52));
  box-shadow: var(--shadow2);
}

.page-artwork .cta-box h2{
  margin: 0 0 10px;
  color: rgba(200,161,90,0.95);
  text-transform: uppercase;
  letter-spacing: 0.20em;
  font-size: 0.98rem;
}

.page-artwork .cta-box p{
  margin: 0 0 16px;
  color: rgba(255,255,255,0.74);
  line-height: 1.75;
}

.page-artwork .cta-box .btn-primary{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  width: 100%;
}

/* Optional (falls DU weißt, welche Section davor kommt):
   Wenn die vorige Section zu viel Abstand nach unten hat,
   reduziere deren margin-bottom gezielt – nur dann aktivieren.
*/
/*
.page-artwork .artwork-nav{
  margin-bottom: 10px;
}
*/

/* -----------------------------
   Reduce any accidental sticky frames / overflow
----------------------------- */
.page-artwork *{
  box-sizing: border-box;
}
.page-artwork img{
  max-width: 100%;
}


/* -----------------------------
   Breadcrumb Bar: volle Breite + echte Viewport-Mitte + kompakt
----------------------------- */


.page-artwork .artwork-crumbbar{
  width: min(1200px, calc(100% - 48px)); 
  margin: 0 auto 45px;           /* kleiner, harmonischer Abstand zum Hero */
  padding: 20px 15px 10px;            /* kompakt */
  border-top: 1px solid rgba(200,161,90,0.10);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  background: rgba(0,0,0,0.22);
  border-radius: 0;
	box-sizing: border-box;   /* <- killt width+padding Overflow */
	 
}

/* volle Breite bleibt auf .artwork-crumbbar */
.page-artwork .artwork-crumbbar .container{
  max-width: none;
  width: 100%;
  margin: 0 auto;
  padding: 10px 0 5px;
  
  display: flex;
    justify-content: center;
}


.page-artwork .artwork-breadcrumbs{
  display: auto;       /* nicht full width */
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: .55rem;
  text-align: center;
  font-size: .76rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  line-height: 1.35;
  border-radius: 0;
}

/* inaktiv = gold */
.page-artwork .artwork-breadcrumbs a{
  color: var(--gold-ink);
  text-decoration: none;
}
.page-artwork .artwork-breadcrumbs a:hover{
  color: rgba(200,161,90,1);
}

/* separator */
.page-artwork .artwork-breadcrumbs .sep{
  opacity: .35;
}

/* aktiv = weiß */
.page-artwork .artwork-breadcrumbs [aria-current="page"]{
  color: rgba(255,255,255,0.92);
}

/* =========================================================
   TOP Next/Prev (zusätzlich, dezent, eine Zeile)
   - wird direkt nach den Breadcrumbs platziert
   - nutzt gleichen "Viewport-Mittel"-Rhythmus wie crumbbar
========================================================= */

.page-artwork .artwork-nextprev.artwork-nextprev--top{
  /* gleiche Breite/Center-Logik wie .artwork-crumbbar */
  width: min(1200px, calc(100% - 48px));
  margin: -22px auto 22px;          /* zieht näher an Breadcrumbs ran */
  padding: 0 15px;
  box-sizing: border-box;

  /* überschreibt das bestehende Grid */
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
}

/* Links: edel, minimal, keine Box */
.page-artwork .artwork-nextprev--top .np{
  display: inline-flex;
  align-items: baseline;
  gap: .55rem;

  padding: 8px 10px;
  border: 1px solid rgba(200,161,90,0.10);
  background: rgba(0,0,0,0.10);
  box-shadow: none;
  text-decoration: none;
}

/* Hover sehr dezent */
.page-artwork .artwork-nextprev--top .np:hover{
  border-color: rgba(200,161,90,0.22);
  background: rgba(0,0,0,0.16);
}

/* Label: klein, spacing, Pfeile kommen aus deinen existing ::before/::after Regeln */
.page-artwork .artwork-nextprev--top .np-label{
  display: inline;
  margin: 0;
  font-size: 0.70rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(200,161,90,0.88);
  opacity: 0.95;
}

/* Titel: eine Zeile, Ellipsis */
.page-artwork .artwork-nextprev--top .np-title{
  display: inline-block;
  max-width: 34ch;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  font-size: 0.86rem;
  line-height: 1.2;
  color: rgba(255,255,255,0.82);
}

/* Ausrichtung links/rechts */
.page-artwork .artwork-nextprev--top .np-prev{ text-align:left; }
.page-artwork .artwork-nextprev--top .np-next{ text-align:right; }

/* Disabled: Platzhalter hält die Zeile */
.page-artwork .artwork-nextprev--top .np-disabled{
  min-width: 140px;
  height: 34px;
  border: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.02);
  opacity: 0.15;
}

/* Mobile: Titel ausblenden, damit es elegant bleibt */
@media (max-width: 720px){
  .page-artwork .artwork-nextprev--top{
    margin: -18px auto 16px;
    padding: 0 16px;
  }
  .page-artwork .artwork-nextprev--top .np-title{
    display: none;
  }
}
/* ===== Ähnliche Werke – sehr klein & kunstmarkt-tauglich (1 Werk) ===== */
.page-artwork .artwork-related{
  margin-top: 16px !important;
  max-width: 360px;              /* wirkt wie Sidebar-Element */
}

.page-artwork .artwork-related h2{
  font-size: 14px !important;
  line-height: 1.25 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  margin: 0 0 10px 0 !important;
  opacity: .55 !important;
  font-weight: 500 !important;
}

/* nur 1 Werk -> 1 Zeile */
.page-artwork .artwork-related .related-grid{
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 10px !important;
  margin: 0 !important;
}

/* ruhig, kein "Shop-Karten"-Look */
.page-artwork .artwork-related .related-card{
  display: grid !important;
  grid-template-columns: 84px 1fr !important;  /* kleines Thumb links */
  gap: 12px !important;
  align-items: center !important;

  border: 1px solid rgba(255,255,255,.06) !important;
  border-radius: 0px !important;
  background: rgba(255,255,255,.015) !important;
  overflow: hidden !important;

  text-decoration: none !important;
}

.page-artwork .artwork-related .related-img{
  width: 84px !important;
  height: 110px !important;
  overflow: hidden !important;
  background: rgba(255,255,255,.02) !important;
}

.page-artwork .artwork-related .related-img img{
  display:block !important;
  width:100% !important;
  height:100% !important;
  object-fit: cover !important;
}

.page-artwork .artwork-related .related-meta{
  padding: 10px 12px 10px 0 !important;
}

.page-artwork .artwork-related .related-title{
  font-size: 13px !important;
  line-height: 1.2 !important;
  font-weight: 600 !important;
  margin: 0 !important;
}

.page-artwork .artwork-related .related-sub{
  font-size: 11.5px !important;
  line-height: 1.35 !important;
  opacity: .65 !important;
  margin-top: 6px !important;
}

.page-artwork .artwork-related .related-card:hover{
  border-color: rgba(255,255,255,.10) !important;
  background: rgba(255,255,255,.02) !important;
}