/* /assets/css/frontpage.css
   Poster-frontpage skin (uses /assets/images/frontpage.png as the bg)
*/

:root{
  --pink: #ff00c8;
  --acid: #c9ff00;
  --cyan: #00e7ff;
  --ink: rgba(0,0,0,.78);
  --ink2: rgba(0,0,0,.55);
}

html, body{
  height: 100%;
}

body.layout--frontpage{
  margin: 0;
  overflow: hidden;          /* keep it poster-fit */
  background: #061f1d;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.cover-poster{
  position: relative;
  width: 100vw;
  height: 100vh;
  isolation: isolate;
}

/* background image layer */
.poster-bg{
  position: absolute;
  inset: 0;
  background-image: url("/assets/images/frontpage2.png");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  filter: saturate(1.15) contrast(1.07);
  transform: scale(1.01);
  z-index: 0;
}

/* common poster link styling */
.cover-poster a{
  position: absolute;
  z-index: 3;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  font-weight: 900;
  line-height: 0.92;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

.cover-poster a:focus{
  outline: 2px solid var(--acid);
  outline-offset: 6px;
}

/* hover should feel like print misregistration, not "button hover" */
@keyframes jitter{
  0%{ transform: translate(0,0) rotate(var(--rot,0deg)); filter:none; }
  15%{ transform: translate(1px,-1px) rotate(var(--rot,0deg)); }
  35%{ transform: translate(-1px,0px) rotate(var(--rot,0deg)); }
  60%{ transform: translate(1px,1px) rotate(var(--rot,0deg)); }
  100%{ transform: translate(0,0) rotate(var(--rot,0deg)); }
}
@keyframes flicker{
  0%, 100%{ opacity: 1; }
  35%{ opacity: .9; }
  55%{ opacity: 1; }
  72%{ opacity: .85; }
}

.cover-poster a:hover{
  text-shadow:
    2px 0 0 rgba(0,231,255,.65),
    -2px 0 0 rgba(255,0,200,.55);
}

/* MASTHEAD: SOMEODD */
.poster-title{
  left: 3.2vw;
  top: 2.2vh;
  color: var(--pink);
  font-size: clamp(56px, 12vw, 170px);
  letter-spacing: -0.06em;
  z-index: 5;

  /* subtle "print slip" line through it */
  background:
    linear-gradient(transparent 52%, rgba(0,0,0,.12) 52%, rgba(0,0,0,.12) 61%, transparent 61%);
  -webkit-background-clip: text;
  background-clip: text;
}

.poster-title:visited {
  color: var(--pink);
}

/* TOP STRAP: ANTI–DESIGN (yellow-green, right-ish like ref) */
.poster-top-right{
  right: 8.2vw;
  top: 10.5vh;
  color: var(--acid);
  font-size: clamp(22px, 4.2vw, 64px);
  letter-spacing: -0.04em;
  z-index: 6;
  opacity: .95;
}

/* RIGHT VERTICAL: ABOUT (cyan, vertical on far right) */
.poster-vertical-right{
  right: 2.6vw;
  top: 6.5vh;
  color: var(--cyan);
  font-size: clamp(18px, 3.2vw, 54px);
  letter-spacing: -0.02em;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  z-index: 6;
}

/* LEFT: PHLOG should be BLUE/CYAN and UPSIDE DOWN like the reference edge text */
.poster-left-1{
  left: 1.6vw;
  top: 36vh;                 /* center-ish vertically */
  color: var(--ink);
  font-size: clamp(18px, 3.6vw, 54px);
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
  transform-origin: center;
  opacity: .95;
  z-index: 7;                /* ensure it doesn't disappear behind title */
}

/* LEFT STACK: BRUTALIST RAW (magenta mid-left) */
.poster-left-2{
  left: 5.2vw;
  top: 34vh;
  transform: rotate(180deg);
  color: var(--pink);
  font-size: clamp(28px, 4.8vw, 78px);
  letter-spacing: -0.03em;
  z-index: 6;
}

/* LEFT STACK: NO / GRIDS (magenta, slightly below) */
.poster-left-3{
  position: absolute;
  left: 5.2vw;
  top: 54vh;
  color: var(--pink);
  font-weight: 900;
  text-transform: uppercase;
  font-size: clamp(18px, 3.2vw, 48px);
  line-height: .9;
  z-index: 6;
  opacity: .92;
}

/* CENTER BLOCK: simulate the big black panel */
.poster-center{
  left: 24vw;
  top: 28vh;
  transform: translate(-50%, -50%);
  color: var(--acid);
  font-size: clamp(34px, 4.9vw, 84px);
  letter-spacing: -0.03em;
  padding: clamp(14px, 2.2vw, 26px) clamp(18px, 2.6vw, 34px);
  background: var(--ink);
  box-shadow: 0 10px 40px rgba(0,0,0,.25);
  z-index: 7;
}

/* the little neon bar behind "VOID"/highlight area */
.poster-center .highlight{
  position: relative;
  display: inline-block;
  padding-right: .15em;
	color: #000;
}
.poster-center .highlight::after{
  content: "";
  position: absolute;
  left: 58%;
  top: 54%;
  width: 8.6em;
  height: 1.05em;
  background: var(--acid);
  opacity: .92;
  transform: translate(-50%, -50%) rotate(-1deg);
  z-index: -1;
  filter: saturate(1.05);
}

/* BOTTOM INVERTED: SEARCH (magenta, upside down centered bottom) */
.poster-bottom-invert{
  left: 40%;
  bottom: 3.2vh;
  --rot: 180deg;
  transform: translateX(-50%) rotate(180deg)!important;
  color: var(--cyan);
  font-size: clamp(18px, 3.5vw, 56px);
  letter-spacing: -0.02em;
  z-index: 6;
  opacity: .92;
}

/* MICRO CREDIT (bottom-right tiny) */
.poster-micro{
  position: absolute;
  right: 2.6vw;
  bottom: 3.3vh;
  z-index: 8;
  color: var(--acid);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: clamp(9px, 1.05vw, 13px);
  opacity: .75;
  mix-blend-mode: screen;
}

/* kill “too many outlines” globally for this poster */
.cover-poster *{
  border: 0 !important;
}

/* Make sure nested theme styles don’t accidentally mess with anchors */
.cover-poster a,
.cover-poster a:visited{
}

/* Responsive: keep everything on-viewport and legible */
@media (max-width: 900px){
  .poster-left-2{ left: 6vw; top: 38vh; }
  .poster-left-3{ left: 6vw; top: 58vh; }
  .poster-center{ left: 62vw; top: 62vh; }
}

@media (max-width: 650px){
  .poster-title{ left: 4vw; top: 3vh; font-size: 16vw; }
  .poster-top-right{ right: 6vw; top: 12vh; font-size: 7vw; }
  .poster-vertical-right{ right: 3vw; top: 8vh; font-size: 7vw; }
  .poster-left-1{ left: 2vw; top: 22vh; font-size: 7vw; }
  .poster-left-2{ left: 8vw; top: 20vh; font-size: 9vw; }
  .poster-left-3{ left: 8vw; top: 30vh; font-size: 6.5vw; }
  .poster-center{ position: static!important; left: 0; top: 0; font-size: 9vw; }
  .poster-bottom-invert{ font-size: 7vw; }
  .poster-mid { position: absolute; bottom: 0; top: auto; }
}

/* --- CONTEXT PANEL (lower-right bay) --- */

.poster-context{
  position: absolute;
  z-index: 6;
  /* place inside the empty bay to the right of the photo */
  left: 55.5vw;
  top: 66.5vh;
  width: 40vw;
  height: 27vh;

  /* panel feel: brutal dark plate, not outlined */
  background: rgba(0,0,0,0.40);
  backdrop-filter: blur(1px);
  padding: 1.1vw 1.2vw;
}

.pc-grid{
  height: 100%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: auto 1fr 1fr;
  gap: 0.85vw;
}

/* tiles */
.pc-tile{
  display: block;
  background: rgba(0,0,0,0.50);
  padding: 0.85vw 0.85vw 0.75vw;
  color: var(--lime);
  mix-blend-mode: screen;
  text-decoration: none;
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.0;
  border: 0; /* no outlines */
  position: relative;
}

/* subtle “print” noise by shadow only, not borders */
.pc-tile{
  box-shadow: 0 0 0 0 rgba(0,0,0,0);
}
.pc-tile:hover{
  filter: drop-shadow(0 0 10px rgba(255,255,255,0.14)) drop-shadow(0 0 18px rgba(0,0,0,0.30));
}

/* kicker/title/sub */
.pc-kicker{
  display: block;
  font-size: clamp(9px, 0.85vw, 14px);
  letter-spacing: 0.14em;
  opacity: 0.95;
  color: var(--cyan);
  mix-blend-mode: screen;
}

.pc-title{
  display: block;
  margin-top: 0.3vw;
  font-size: clamp(16px, 1.8vw, 28px);
  letter-spacing: -0.04em;
}

.pc-sub{
  display: block;
  margin-top: 0.35vw;
  font-size: clamp(10px, 0.95vw, 14px);
  font-weight: 800;
  letter-spacing: 0.06em;
  opacity: 0.9;
  color: rgba(217,255,47,0.95);
}

/* brand accents (no borders, just color shifts) */
.pc-github .pc-title{ color: var(--lime); }
.pc-masto .pc-title{ color: var(--magenta); }
.pc-mail .pc-title{ color: var(--cyan); }
.pc-suedo .pc-title{ color: var(--lime); }

.pc-masto{ background: rgba(0,0,0,0.56); }
.pc-mail{ background: rgba(0,0,0,0.52); }
.pc-suedo{ background: rgba(0,0,0,0.58); }

/* Featured strip spans full width */
.pc-feature{
  grid-column: 1 / -1;
  grid-row: 2 / 3;
  display: block;
  padding: 0.85vw 1.0vw;
  background: rgba(0,0,0,0.60);
  text-decoration: none;
  mix-blend-mode: screen;
}

.pc-feature-title{
  display: block;
  margin-top: 0.3vw;
  font-size: clamp(18px, 2.4vw, 34px);
  letter-spacing: -0.04em;
  font-weight: 900;
  color: var(--magenta);
}

/* Latest list block spans 2 columns */
.pc-latest{
  grid-column: 1 / -1;
  grid-row: 3 / 4;
  background: rgba(0,0,0,0.45);
  padding: 0.75vw 0.9vw;
  mix-blend-mode: screen;
}

.pc-latest-head{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 0.35vw;
}

.pc-more{
  color: var(--lime);
  text-decoration: none;
  font-weight: 900;
  letter-spacing: 0.08em;
  font-size: clamp(10px, 0.95vw, 14px);
  opacity: 0.95;
}
.pc-more:hover{ opacity: 1; }

.pc-post{
  display: block;
  text-decoration: none;
  color: rgba(217,255,47,0.95);
  font-weight: 850;
  letter-spacing: 0.02em;
  font-size: clamp(12px, 1.05vw, 16px);
  line-height: 1.25;
  margin-top: 0.25vw;
}
.pc-post:hover{
  color: var(--cyan);
}

/* Keep it usable on smaller screens */
@media (max-width: 980px){
  .poster-context{
    left: 8vw;
    top: 70vh;
    width: 84vw;
    height: 26vh;
    padding: 2.2vw 2.4vw;
  }
  .pc-grid{
    gap: 2.0vw;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto auto 1fr;
  }
  .pc-feature{ grid-row: 2 / 3; }
  .pc-latest{ grid-row: 3 / 4; }
}

/* =========================
   POSTER MID (container)
   ========================= */

.poster-mid{
  position:absolute;
  left: 56%;
  top: 64%;
  transform: translate(-50%, -50%);
  width: min(820px, 44vw);
  z-index: 7;

  display: grid;
  grid-template-rows: auto auto;
  gap: 14px;
}

/* =========================
   SIMULACRA BLOCK
   ========================= */

.poster-center{
  display:block;
  text-transform: uppercase;
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 0.92;

  padding: 18px 18px 14px;
  background: rgba(0,0,0,0.62);
  color: rgba(255,255,255,0.92);

  transition: filter .12s ease, background .12s ease;
}

.poster-center:hover{
  background: rgba(0,0,0,0.70);
  filter: saturate(1.15) contrast(1.05);
}

.poster-center .highlight{
  display:inline-block;
  padding: 6px 10px 4px;
  background: rgba(204, 255, 0, 0.92);
  color: #000;
  margin-top: 6px;
}

/* =========================
   CONTEXT PANEL RESET
   IMPORTANT: prevents overlay
   ========================= */

.poster-context,
.poster-context *{
  position: static !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  /*transform: none !important;*/
  float: none !important;
}

/* The panel itself can be positioned by poster-mid; inside: NORMAL FLOW */
.poster-context{
  background: rgba(0,0,0,0.42);
  padding: 14px;
  color: rgba(255,255,255,0.92);

}

/* =========================
   TOP ROW: TILES GRID
   (icons + featured + misc)
   ========================= */

.ctx-tiles{
  grid-area: tiles;
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 1fr;
  gap: 12px;
  align-items: stretch;
}

/* shared tile style */
.ctx-tile{
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 8px;

  padding: 12px;
  background: rgba(0,0,0,0.35);
  color: rgba(255,255,255,0.92);
  text-decoration: none;

  border: 1px solid rgba(255,255,255,0.06); /* tiny, not “outliney” */
  transition: filter .12s ease, background .12s ease;
}

.ctx-tile:hover{
  background: rgba(0,0,0,0.48);
  filter: saturate(1.12);
}

/* tile header */
.ctx-kicker{
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.80;
}

/* featured tile: more violent */
.ctx-tile--featured{
  background: rgba(0,0,0,0.58);
  border-color: rgba(204,255,0,0.22);
}

.ctx-title{
  font-weight: 900;
  text-transform: uppercase;
  line-height: 0.95;
  letter-spacing: -0.01em;
  color: rgba(255,255,255,0.95);
}

.ctx-sub{
  font-size: 12px;
  opacity: 0.80;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* icon tile */
.ctx-tile--icons{
  grid-template-rows: auto auto 1fr;
}

.ctx-icons{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.ctx-ico{
  display: grid;
  place-items: center;
  height: 44px;

  background: rgba(0,255,255,0.12);
  color: rgba(255,255,255,0.92);

  text-decoration: none;
  font-weight: 900;
  text-transform: uppercase;

  border: 1px solid rgba(0,255,255,0.18);
  transition: background .12s ease, filter .12s ease;
}

.ctx-ico:hover{
  background: rgba(0,255,255,0.22);
  filter: saturate(1.2);
}

/* thumbnail tiles */
.ctx-thumb{
  aspect-ratio: 16 / 9;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.06);
  overflow: hidden;
}

.ctx-thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(1.15) contrast(1.05);
}

/* =========================
   POSTS ROW: INLINE WITH //
   ========================= */

.ctx-posts{
  grid-area: posts;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.10);

  grid-column: 1 / -1;   /* span full row */
  margin-top: 0.75rem;  /* space below cards */
  align-self: start;    /* prevent sideways drift */
  width: 100%;
}

.ctx-posts a {
  display: inline !important;
}

.ctx-posts .ctx-kicker{
  margin-bottom: 8px;
}

/* inline run */
.ctx-postlist{
  display: block;
  line-height: 1.35;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.ctx-postlist a{
  display: inline-block !important;
  color: rgba(255,255,255,0.92);
  text-decoration: none;
  max-width: 40ch !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ctx-postlist a:hover{
  text-decoration: underline;
}

/* the // separators */
.ctx-postlist a + a::before{
  content: " // ";
  color: rgba(204,255,0,0.85);
  font-weight: 900;
  letter-spacing: 0.08em;
}

/* =========================
   MOBILE
   ========================= */

@media (max-width: 1000px){
  .poster-mid{
    left: 50%;
    top: 70%;
    width: min(840px, 92vw);
  }

  .poster-context{
    grid-template-columns: 1fr;
    grid-template-areas:
      "tiles"
      "posts";
  }

  .ctx-tiles{
  }
}

@media (max-width: 640px){
  .ctx-tiles{
	  display: block;
  }
  .poster-micro {
	  position: static;
  }
  .ctx-icons{
    grid-template-columns: repeat(4, minmax(50px, 1fr));
  }

  .poster-center{
	  font-size: 100%;
	  display: inline-block;
  }
  .poster-bottom-invert {
	  position: static;
	  transform: rotate(180deg);
  }
}






/* ================================
   WOW TITLE: TRIPLE-PLATE SLICE
   ================================ */

.poster-title{
  position:absolute; /* keep as you already have */
  left: 3.2vw;
  top: 3.0vh;
  z-index: 40;

  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 0.84;

  /* choose color: magenta is fine, but let’s deepen it */
  color: #ff00c8;

  /* optional: slight tilt for poster violence */
  transform: rotate(-2.2deg) skewX(-6deg);
  transform-origin: left top;

  /* make it feel printed */
  text-shadow:
    0.06em 0.02em 0 rgba(0,0,0,0.25),
    -0.02em 0.02em 0 rgba(0,0,0,0.18);
}

/* Two “plates” of the same word, clipped into bands */
.poster-title::before,
.poster-title::after{
  content: attr(href); /* fallback if you don’t add data-text */
  /* IMPORTANT: better if you set data-text, see note below */
  content: attr(data-text);

  position:absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;

  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0.92;
}

/* CYAN PLATE: top band */
.poster-title::before{
  color: #20f7ff;
  transform: translate(0.06em, -0.02em) rotate(0.4deg);
  clip-path: polygon(
    0% 0%,
    100% 0%,
    100% 44%,
    0% 44%
  );
  filter: saturate(1.1) contrast(1.05);
}

/* ACID PLATE: middle “tear” band, shifted harder */
.poster-title::after{
  color: #cfff00;
  transform: translate(-0.03em, 0.06em) rotate(-0.2deg);
  clip-path: polygon(
    0% 42%,
    100% 34%,
    100% 82%,
    0% 92%
  );
  opacity: 0.84;
}

/* Hard “cut line” across the title (like a knife splice) */
.poster-title{
  -webkit-mask-image: linear-gradient(
    175deg,
    #000 0%,
    #000 46%,
    rgba(0,0,0,0.0) 47%,
    rgba(0,0,0,0.0) 49%,
    #000 50%,
    #000 100%
  );
  -webkit-mask-size: 100% 100%;
  mask-image: linear-gradient(
    175deg,
    #000 0%,
    #000 46%,
    rgba(0,0,0,0.0) 47%,
    rgba(0,0,0,0.0) 49%,
    #000 50%,
    #000 100%
  );
  mask-size: 100% 100%;
}

/* Optional: disable any previous hover styling on the title */
.poster-title:hover{
  filter: none;
  text-decoration: none;
}






/* ================================
   JAGGED CONTEXT PANEL (ANTI-GRID)
   ================================ */

/* rotate the whole context slab */
.poster-mid{

    transform:
    rotate(-2.4deg)
    skewX(-1.2deg)
    translate(-40%, -60%); /* ← tweak these */
  transform-origin: 20% 20%;
}

/* keep text from getting too drunk (optional, subtle) */
.poster-mid *{
  transform: rotate(1.2deg);
  transform-origin: center;
}

/* if your cubes are links/cards, apply jitter */
.poster-mid a,
.poster-mid .tile,
.poster-mid .poster-card{
  display: block;
  transform-origin: center;
  transition: transform 120ms ease, filter 120ms ease;
}

/* micro-jitter per item */
.poster-mid a:nth-child(1),
.poster-mid .tile:nth-child(1),
.poster-mid .poster-card:nth-child(1){ transform: rotate(-2deg) translate(-2px, 1px); }

.poster-mid a:nth-child(2),
.poster-mid .tile:nth-child(2),
.poster-mid .poster-card:nth-child(2){ transform: rotate(1.5deg) translate(2px, -1px); }

.poster-mid a:nth-child(3),
.poster-mid .tile:nth-child(3),
.poster-mid .poster-card:nth-child(3){ transform: rotate(-1.1deg) translate(1px, 2px); }

.poster-mid a:nth-child(4),
.poster-mid .tile:nth-child(4),
.poster-mid .poster-card:nth-child(4){ transform: rotate(2.2deg) translate(-1px, 0px); }

.poster-mid a:nth-child(5),
.poster-mid .tile:nth-child(5),
.poster-mid .poster-card:nth-child(5){ transform: rotate(-1.7deg) translate(-2px, -2px); }

.poster-mid a:nth-child(6),
.poster-mid .tile:nth-child(6),
.poster-mid .poster-card:nth-child(6){ transform: rotate(1.1deg) translate(2px, 2px); }

/* hover: make it feel like a physical tile (not “whack”) */
.poster-mid a:hover,
.poster-mid .tile:hover,
.poster-mid .poster-card:hover{
  transform: translateY(-2px) rotate(0.6deg);
  filter: brightness(1.08) contrast(1.05);
  text-decoration: none;
}













/* ===========================
   MINIMAL PATCH (ONLY mid + center + post links)
   Paste at VERY BOTTOM
   =========================== */

/* 1) Make sure these are actually above the background and not getting clipped */
.cover-poster { position: relative; overflow: hidden; }

/* 2) SIMULACRA must never disappear */
.poster-center{
  position: absolute;
  z-index: 80;              /* always above poster-mid */
  display: block;
  max-width: min(92vw, 760px);
  pointer-events: auto;
}

/* 3) Context box: stable + never overlaps itself */
.poster-mid{
  position: absolute;
  z-index: 40;
  width: min(560px, 52vw);
  max-width: 92vw;
}

/* 4) Stop post titles from blowing out the box */
.poster-mid .post-list,
.poster-mid .post-list a{
  min-width: 0;
}

.poster-mid .post-list a{
  display: block;
  max-width: 30ch;          /* your “30 chars” rule */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ===========================
   RESPONSIVE: keep both visible
   =========================== */

/* DESKTOP/WIDE:
   Keep whatever positions you already loved.
   (Do NOT override your good values here.) */

/* MID SCREENS: nudge poster-mid toward center without changing poster-center */
@media (max-width: 980px){
  .poster-mid{
    /* pull it inward */
    left: 58%;
    top: 58%;
    transform: translate(-50%, -50%) rotate(-2deg);
    width: min(520px, 72vw);
  }

  .poster-mid .post-list a{
    max-width: 28ch;
  }
}

/* SMALL SCREENS:
   Rule: poster-mid sits ABOVE poster-center, not on top of it.
   We do this by anchoring both to the bottom, with guaranteed separation. */
@media (max-width: 640px){
  .poster-mid{
    left: 0;
    bottom: 0;           /* context box higher */
    top: auto;
    transform: rotate(-1deg);
    width: 92vw;
  }

  .poster-mid .post-list a{
    max-width: 26ch;
  }

  .poster-left-1 {
  }
  .cover-poster {
	  overflow: auto;
  }
}