/* Minimal, Wix-friendly static portfolio */
/* No build tools. Just drop the folder into Wix “HTML iframe” or host anywhere. */

:root{
  --bg:#ffffff;
  --fg:#121212;
  --muted:#6b6b6b;
  --line:#e8e8e8;
  --chip:#f5f5f5;
  --chipOn:#111111;
  --chipOnText:#ffffff;
  --shadow:0 18px 50px rgba(0,0,0,.06);
  --radius:14px;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
}

*{ box-sizing:border-box; }
html,body{ 
  height:100%; 
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  width: 100%;
}
body{
  font-family: var(--sans);
  background: var(--bg);
  color: var(--fg);
}

/* Iframe wrapper - creates internal viewport boundary */
.iframe-wrapper {
  width: 100%;
  max-width: 100%;
  height: 100%;
  min-height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
  position: relative;
}

.app{ max-width: 1320px; margin: 0 auto; padding: 22px 18px 28px; }

.header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  padding-bottom:16px;
  border-bottom:1px solid var(--line);
}

.brand__title{
  font-weight: 700;
  letter-spacing: .02em;
}
.brand__sub{
  margin-top:4px;
  color: var(--muted);
  font-size: 12px;
  max-width: 520px;
  line-height: 1.35;
}

.search{
  min-width: 260px;
  display:flex;
  justify-content:flex-end;
}
.search input{
  width: 100%;
  max-width: 420px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  outline:none;
  font-family: var(--mono);
  font-size: 13px;
}
.search input:focus{ border-color:#cfcfcf; }

/* Site footer */
.site-footer {
  margin-top: 20px;
  padding: 16px 0;
  text-align: center;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
  border-top: 1px solid var(--line);
}

.toolbar{
  display:flex;
  align-items:center;
  gap:10px;
  padding: 12px 0 12px;
  color: var(--muted);
  font-size: 12px;
}
.dot{ color: #c0c0c0; }

.linklike{
  background:none;
  border:none;
  padding:0;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 12px;
  cursor:pointer;
  text-decoration: underline;
}
.linklike:hover{ color: var(--fg); }

.main{
  display:grid;
  grid-template-columns: minmax(420px, 1fr) minmax(420px, 1fr);
  gap: 18px;
  min-height: 70vh;
}

.left{
  border-right: 1px solid var(--line);
  padding-right: 18px;
}
.right{ 
  padding-left: 4px;
  position: sticky;
  top: 20px;
  align-self: start;
  max-height: calc(100vh - 40px);
}

.tagbar{
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
  padding: 6px 0 14px;
  transition: max-height 0.3s ease, opacity 0.3s ease, padding 0.3s ease;
  overflow: hidden;
}

.tagbar.collapsed {
  max-height: 0;
  opacity: 0;
  padding: 0;
  margin: 0;
}

.tag{
  border: 1px solid var(--line);
  background: var(--chip);
  color: var(--fg);
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 12px;
  cursor:pointer;
  user-select:none;
}
.tag.is-on{
  background: var(--chipOn);
  color: var(--chipOnText);
  border-color: var(--chipOn);
}

.tablewrap{
  border:1px solid var(--line);
  border-radius: var(--radius);
  overflow:hidden;
}

.table{
  width: 100%;
  border-collapse: collapse;
  font-family: var(--mono);
  font-size: 12px;
}
.table thead th{
  text-align:left;
  padding: 10px 12px;
  border-bottom:1px solid var(--line);
  background: #fafafa;
  font-weight: 600;
  color: #222;
}
.table tbody td{
  padding: 12px 12px;
  border-bottom:1px solid var(--line);
  vertical-align: middle;
}
.table tbody tr{
  cursor:pointer;
}
.table tbody tr:hover{
  background: #fcfcfc;
}
.table tbody tr.is-active{
  background: #111;
  color: #fff;
}
.table tbody tr.is-active td{
  border-bottom-color:#111;
}

.colYear{ width: 84px; }
.colMedium{ width: 48%; }

.footer{
  padding-top: 10px;
  color: var(--muted);
  font-size: 12px;
  font-family: var(--mono);
}

.viewer{
  height: 100%;
  display:flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.viewer__media{
  border-radius: var(--radius);
  -webkit-border-radius: var(--radius);
  overflow: hidden;
  -webkit-mask-image: -webkit-radial-gradient(white, black); /* Chrome fix for border-radius */
  box-shadow: var(--shadow);
  background: #0b0b0b;
  min-height: 54vh;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: width 0.3s ease, height 0.3s ease;
  isolation: isolate; /* Creates stacking context for Chrome */
}

.viewer__media img{
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
  background: #fff;
  border-radius: var(--radius);
  -webkit-border-radius: var(--radius);
}

.viewer__media video{
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
  border-radius: var(--radius);
  -webkit-border-radius: var(--radius);
}

.viewer__meta{
  width: 100%;
  max-width: var(--media-width, 100%);
  border:1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 12px;
  box-shadow: var(--shadow);
  background: #fff;
}

.viewer__metaTop{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 14px;
}

.viewer__title{
  font-family: var(--mono);
  font-weight: 700;
  letter-spacing: .02em;
}
.viewer__ym{
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
  padding-top: 2px;
}

.viewer__tags{
  margin-top: 6px;
  display:flex;
  flex-wrap:wrap;
  gap: 6px;
}
.pill{
  border:1px solid var(--line);
  border-radius:999px;
  padding: 4px 8px;
  font-size: 11px;
  font-family: var(--mono);
  color: #333;
  background: #fafafa;
}

.viewer__desc{
  margin-top: 10px;
  font-size: 12px;
  line-height: 1.45;
  color: #444;
  font-family: var(--mono);
  white-space: pre-wrap;
}

.viewer__actions{
  margin-top: 10px;
  display:flex;
  gap: 10px;
  justify-content: space-between;
}

.btn{
  width: 100%;
  text-align:center;
  padding: 9px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #fff;
  cursor:pointer;
  font-family: var(--mono);
  font-size: 12px;
  color: #111;
  text-decoration:none;
}
.btn:hover{ border-color:#cfcfcf; }

@media (max-width: 980px){
  .main{ grid-template-columns: 1fr; }
  .left{ border-right:none; padding-right: 0; border-bottom:1px solid var(--line); padding-bottom: 18px; }
  .right{ padding-left:0; }
  .viewer__media{ min-height: 48vh; }
}

/* v4 additions */
.brand__title { display:flex; align-items:baseline; gap:8px; }
.badge { display:inline-flex; width:14px; height:14px; transform: translateY(1px); }
.badge svg { width:100%; height:100%; display:block; }
.adminbar { display:flex; gap:10px; align-items:center; justify-content:flex-end; }
.btn { font: inherit; border:1px solid rgba(255,255,255,.14); background: transparent; color: inherit; padding:8px 10px; border-radius:10px; cursor:pointer; }
.btn--primary { background: rgba(255,255,255,.12); }
.btn--ghost { background: transparent; }
.editing [data-editable="true"] { outline: 1px dashed rgba(255,255,255,.35); outline-offset: 4px; border-radius: 6px; }
.editing [data-editable="true"]:focus { outline-style: solid; }
.viewer__video{width:100%;height:auto;display:block;border-radius:16px;}

.viewer__placeholder{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px;
  text-align: center;
  color: #999;
  min-height: 200px;
}

.viewer__placeholder__title{
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 8px;
  color: #666;
}

.viewer__placeholder__sub{
  font-size: 14px;
  color: #999;
}
@media (max-width: 720px){
  .adminbar { gap:8px; }
  .btn { padding:7px 9px; border-radius: 12px; }
  .badge{ width:13px; height:13px; }
}

/* ===== IFRAME MODE ===== */
/* Optimizations when embedded in an iframe */
body.iframe-mode {
  overflow-x: hidden;
  max-width: 100vw;
  width: 100%;
  overflow-y: auto;
  width: 100%;
  height: 100%;
  min-height: 100%;
  -webkit-overflow-scrolling: touch;
}

body.iframe-mode .app {
  padding: 12px 12px 16px;
  max-width: 100%;
  width: 100%;
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
}

body.iframe-mode .header {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px;
  padding-bottom: 10px;
  align-items: center;
  justify-content: space-between;
}

body.iframe-mode .brand__sub {
  font-size: 10px;
  line-height: 1.3;
}

body.iframe-mode .search {
  min-width: auto;
  width: auto;
}

body.iframe-mode .search input {
  width: auto;
  min-width: 80px;
  max-width: 120px;
  padding: 6px 12px;
  font-size: 11px;
}

/* iframe-mode only affects padding/overflow, NOT layout */
/* Layout changes happen via force-mobile/compact-mode based on actual viewport width */

body.iframe-mode .viewer__media {
  min-height: 35vh;
  max-height: 50vh;
}

body.iframe-mode .tagbar {
  gap: 4px;
  padding: 4px 0 10px;
}

body.iframe-mode .tag {
  padding: 4px 8px;
  font-size: 10px;
}

body.iframe-mode .table th,
body.iframe-mode .table td {
  padding: 6px 6px;
  font-size: 10px;
}

body.iframe-mode .toolbar {
  padding: 6px 0;
  font-size: 10px;
}

body.iframe-mode .footer {
  font-size: 10px;
  padding-top: 6px;
}

body.iframe-mode .viewer__meta {
  padding: 10px;
}

body.iframe-mode .viewer__title {
  font-size: 12px;
}

body.iframe-mode .viewer__ym {
  font-size: 9px;
}

body.iframe-mode .pill {
  padding: 2px 5px;
  font-size: 8px;
}

body.iframe-mode .viewer__desc {
  font-size: 10px;
  margin-top: 6px;
}

body.iframe-mode .viewer__actions {
  gap: 6px;
  margin-top: 8px;
}

body.iframe-mode .btn {
  padding: 6px 8px;
  font-size: 10px;
}

body.iframe-mode .site-footer {
  margin-top: 12px;
  padding: 10px 0;
  font-size: 9px;
}

/* ===== COMPACT MODE (768px - 980px) ===== */
body.compact-mode .app { padding: 14px 12px 20px; }
body.compact-mode .header { flex-direction: row; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
body.compact-mode .search { min-width: auto; width: auto; }
body.compact-mode .search input { width: auto; min-width: 80px; max-width: 140px; font-size: 11px; padding: 7px 12px; }
/* compact-mode: smaller text/padding, but layout handled by media queries */
body.compact-mode .viewer__media { min-height: 35vh; }
body.compact-mode .tagbar { gap: 5px; }
body.compact-mode .tag { padding: 5px 8px; font-size: 10px; }
body.compact-mode .table th, body.compact-mode .table td { padding: 8px 8px; font-size: 11px; }
body.compact-mode .brand__title { font-size: 13px; }
body.compact-mode .brand__sub { font-size: 10px; max-width: 100%; }
body.compact-mode .toolbar { padding: 8px 0; font-size: 10px; }
body.compact-mode .footer { font-size: 10px; }
body.compact-mode .viewer__title { font-size: 12px; }
body.compact-mode .viewer__ym { font-size: 10px; }
body.compact-mode .viewer__tags { gap: 4px; }
body.compact-mode .pill { padding: 3px 6px; font-size: 9px; }
body.compact-mode .viewer__desc { font-size: 10px; margin-top: 8px; }
body.compact-mode .viewer__actions { gap: 6px; margin-top: 8px; }
body.compact-mode .btn { padding: 6px 8px; font-size: 10px; }

/* ===== FORCE MOBILE MODE (480px - 768px) ===== */
body.force-mobile { overflow-x: hidden; width: 100%; }
body.force-mobile .app { padding: 12px 16px 16px; margin: 0; width: 100%; max-width: 100%; box-sizing: border-box; overflow: hidden; }
body.force-mobile .header { flex-direction: row; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; padding-bottom: 10px; width: 100%; box-sizing: border-box; }
body.force-mobile .search { min-width: auto; width: auto; }
body.force-mobile .search input { width: auto; min-width: 70px; max-width: 100px; font-size: 12px; padding: 6px 10px; }
body.force-mobile .main { grid-template-columns: 1fr; gap: 12px; min-height: auto; width: 100%; box-sizing: border-box; overflow: hidden; }
body.force-mobile .left { border-right: none; padding-right: 0; border-bottom: 1px solid var(--line); padding-bottom: 10px; width: 100%; box-sizing: border-box; overflow: hidden; }
body.force-mobile .right { 
  display: none; /* Hide the separate viewer on mobile - media shows inline */
}

/* Inline media row that appears under clicked item on mobile */
.inline-media {
  display: none;
}

body.force-mobile .inline-media {
  display: table-row;
}

body.force-mobile .inline-media td {
  padding: 8px 0;
  background: transparent;
  border-bottom: 1px solid var(--line);
  box-sizing: border-box;
}

body.force-mobile .inline-media__content {
  display: block;
  width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}

body.force-mobile .inline-media__img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
  margin-bottom: 8px;
}

body.force-mobile .inline-media__video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
  margin-bottom: 8px;
}

body.force-mobile .inline-media__meta {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  width: 100%;
  box-sizing: border-box;
}

body.force-mobile .inline-media__meta-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

body.force-mobile .inline-media__title {
  font-family: var(--mono);
  font-weight: 600;
  font-size: 11px;
  line-height: 1.2;
}

body.force-mobile .inline-media__ym {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--muted);
  white-space: nowrap;
}

body.force-mobile .inline-media__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin-top: 4px;
}

body.force-mobile .inline-media__pill {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 2px 6px;
  font-size: 8px;
  font-family: var(--mono);
  color: #666;
  background: #fafafa;
}

body.force-mobile .inline-media__desc {
  margin-top: 5px;
  font-size: 9px;
  line-height: 1.3;
  color: #666;
  font-family: var(--mono);
  display: none; /* Hide description to save space */
}

body.force-mobile .inline-media__actions {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}

body.force-mobile .inline-media__btn {
  flex: 1;
  padding: 6px 10px;
  font-size: 10px;
  text-align: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  text-decoration: none;
  color: #111;
  font-family: var(--mono);
  cursor: pointer;
}

body.force-mobile .inline-media__btn:active {
  background: #f5f5f5;
}
body.force-mobile .viewer__media { min-height: 30vh; max-height: 50vh; }
body.force-mobile .tagbar { 
  gap: 6px; 
  padding: 6px 0 10px;
  width: 100%;
  box-sizing: border-box;
  overflow-x: auto;
  flex-wrap: nowrap;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
}
body.force-mobile .tagbar::-webkit-scrollbar { display: none; } /* Chrome/Safari */
body.force-mobile .tag { flex-shrink: 0; white-space: nowrap; }
body.force-mobile .tag { padding: 6px 10px; font-size: 11px; }
body.force-mobile .table th, body.force-mobile .table td { padding: 8px 6px; font-size: 12px; }
body.force-mobile .table th { font-size: 11px; }
body.force-mobile .brand__title { font-size: 14px; }
body.force-mobile .brand__sub { display: none; }
body.force-mobile .toolbar { padding: 8px 0; font-size: 11px; gap: 6px; }
body.force-mobile .linklike { font-size: 11px; }
body.force-mobile .footer { font-size: 11px; padding-top: 8px; }
body.force-mobile .viewer { gap: 10px; }
body.force-mobile .viewer__title { font-size: 14px; }
body.force-mobile .viewer__ym { font-size: 11px; }
body.force-mobile .viewer__tags { gap: 4px; margin-top: 4px; }
body.force-mobile .pill { padding: 4px 8px; font-size: 10px; }
body.force-mobile .viewer__desc { font-size: 12px; margin-top: 6px; line-height: 1.4; }
body.force-mobile .viewer__actions { gap: 8px; margin-top: 8px; }
body.force-mobile .btn { padding: 8px 12px; font-size: 12px; border-radius: 8px; }
body.force-mobile .side-nav { display: none; }
body.force-mobile .creative-controls { bottom: 6px; right: 6px; gap: 3px; }
body.force-mobile .creative-controls button { width: 22px; height: 22px; font-size: 10px; }
body.force-mobile .colYear { display: none !important; }
body.force-mobile .colMedium { display: none !important; }
body.force-mobile .tablewrap { border-radius: 6px; overflow: hidden; width: 100%; box-sizing: border-box; display: block; }
body.force-mobile .table { width: 100%; table-layout: auto; overflow: hidden; word-break: break-word; }
body.force-mobile .table .colTitle { width: 100%; }
body.force-mobile .viewer__meta { padding: 12px; border-radius: 10px; }
body.force-mobile .site-footer { margin-top: 6px; padding: 6px 0; font-size: 6px; }
body.force-mobile .badge img { width: 12px; height: 12px; }

/* ===== MICRO MODE (< 480px) ===== */
body.micro-mode .app { padding: 5px 5px 8px; }
body.micro-mode .header { gap: 4px; padding-bottom: 5px; }
body.micro-mode .search { min-width: auto; width: auto; }
body.micro-mode .search input { width: auto; min-width: 50px; max-width: 65px; font-size: 7px; padding: 3px 6px; }
body.micro-mode .tagbar { gap: 2px; padding: 2px 0 5px; overflow-x: auto; flex-wrap: nowrap; }
body.micro-mode .tag { padding: 2px 4px; font-size: 6px; white-space: nowrap; }
body.micro-mode .table th, body.micro-mode .table td { padding: 3px 3px; font-size: 7px; }
body.micro-mode .table th { font-size: 6px; }
body.micro-mode .brand__title { font-size: 9px; }
body.micro-mode .toolbar { padding: 3px 0; font-size: 6px; gap: 3px; }
body.micro-mode .linklike { font-size: 6px; }
body.micro-mode .viewer__media { min-height: 18vh; max-height: 30vh; }
body.micro-mode .viewer__title { font-size: 8px; }
body.micro-mode .viewer__ym { font-size: 6px; }
body.micro-mode .pill { padding: 1px 3px; font-size: 5px; }
body.micro-mode .viewer__desc { font-size: 6px; line-height: 1.3; }
body.micro-mode .btn { padding: 3px 4px; font-size: 6px; }
body.micro-mode .colYear { display: none !important; }
body.micro-mode .colMedium { display: none !important; }
body.micro-mode .viewer__actions { flex-direction: row; gap: 3px; }
body.micro-mode .footer { font-size: 6px; padding-top: 4px; }
body.micro-mode .site-footer { margin-top: 5px; padding: 4px 0; font-size: 5px; }
body.micro-mode .viewer__meta { padding: 5px; }
body.micro-mode .viewer__tags { gap: 2px; }
body.micro-mode .badge img { width: 10px; height: 10px; }

/* Viewer is always visible on mobile - shows below the work list */

/* ===== ULTRA COMPACT MODE (< 380px) ===== */
/* For very small iframes or narrow mobile views */
body.ultra-compact .app { padding: 3px 3px 6px; }
body.ultra-compact .header { flex-direction: row; gap: 3px; padding-bottom: 4px; align-items: center; justify-content: space-between; }
body.ultra-compact .brand__title { font-size: 8px; }
body.ultra-compact .brand__sub { display: none; }
body.ultra-compact .search { min-width: auto; width: auto; }
body.ultra-compact .search input { width: auto; min-width: 40px; max-width: 55px; font-size: 6px; padding: 3px 6px; }
body.ultra-compact .toolbar { padding: 2px 0; font-size: 5px; gap: 2px; }
body.ultra-compact .linklike { font-size: 5px; }
body.ultra-compact .dot { display: none; }
body.ultra-compact .tagbar { gap: 2px; padding: 2px 0 4px; overflow-x: auto; flex-wrap: nowrap; }
body.ultra-compact .tag { padding: 2px 4px; font-size: 5px; white-space: nowrap; }
body.ultra-compact .main { gap: 4px; }
body.ultra-compact .left { padding-bottom: 4px; }
body.ultra-compact .tablewrap { border-radius: 4px; }
body.ultra-compact .table th, body.ultra-compact .table td { padding: 2px 2px; font-size: 6px; }
body.ultra-compact .table th { font-size: 5px; }
body.ultra-compact .colYear, body.ultra-compact .colMedium { display: none !important; }
body.ultra-compact .footer { font-size: 5px; padding-top: 3px; }
body.ultra-compact .viewer { gap: 4px; }
body.ultra-compact .viewer__media { min-height: 15vh; max-height: 28vh; border-radius: 5px; }
body.ultra-compact .viewer__meta { padding: 4px; border-radius: 5px; }
body.ultra-compact .viewer__title { font-size: 7px; }
body.ultra-compact .viewer__ym { font-size: 5px; }
body.ultra-compact .viewer__tags { gap: 1px; margin-top: 2px; }
body.ultra-compact .pill { padding: 1px 3px; font-size: 5px; }
body.ultra-compact .viewer__desc { font-size: 6px; margin-top: 3px; line-height: 1.25; }
body.ultra-compact .viewer__actions { gap: 3px; margin-top: 4px; }
body.ultra-compact .btn { padding: 3px 4px; font-size: 5px; border-radius: 3px; }
body.ultra-compact .site-footer { margin-top: 4px; padding: 3px 0; font-size: 5px; }
body.ultra-compact .badge img { width: 8px; height: 8px; }

/* ===== IFRAME + MOBILE COMBINATION ===== */
/* When both iframe mode and mobile modes are active */
body.iframe-mode.force-mobile .app { padding: 10px 14px 12px; max-width: 100%; }
body.iframe-mode.force-mobile .header { gap: 6px; }
body.iframe-mode.force-mobile .main { gap: 8px; }
body.iframe-mode.force-mobile .viewer__media { min-height: 25vh; max-height: 40vh; }

body.iframe-mode.micro-mode .app { padding: 8px 12px 10px; max-width: 100%; }
body.iframe-mode.micro-mode .viewer__media { min-height: 20vh; max-height: 35vh; }

body.iframe-mode.ultra-compact .app { padding: 4px 4px 8px; }
body.iframe-mode.ultra-compact .viewer__media { min-height: 18vh; max-height: 30vh; }