/* ===== SECTION A — BASE & TOKENS (identical to other SESHP pages) ===== */
*{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;max-width:100%;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:#4D0D09 #FBF8F4}
html{scroll-behavior:smooth}
img,video{max-width:100%;display:block}
button,a{-webkit-tap-highlight-color:transparent}
:root{
  --primary:#9A2921;--primary-dark:#4D0D09;--primary-deep:#371311;
  --primary-deeper:#2A0908;--primary-bright:#C7372C;
  --accent-warm:#D4A87C;--accent-warm-soft:#E8D2B8;--accent-warm-deep:#8A5E36;
  --text:#1c1c1c;--text-soft:#374151;--text-mute:#6B7280;
  --bg:#FBF8F4;--bg-card:#F8F7F4;--line:#E5E2D9;
  --motion-ease:cubic-bezier(.22, 1, .36, 1);
  --motion-med:700ms;--motion-fast:420ms;
}
body{font-family:'Helvetica Neue',Arial,sans-serif;background:var(--bg);color:var(--text-soft);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.page{font-family:'Helvetica Neue',Arial,sans-serif;background:var(--bg);color:var(--text-soft)}
a{color:inherit;text-decoration:none}



/* ===== SECTION C — HERO (Materials split: copy left, image right) ===== */
.hero{
  display:grid;
  grid-template-columns:1fr 1fr;
  min-height:520px;
  position:relative;
}
@media(max-width:992px){.hero{grid-template-columns:1fr;min-height:auto}}

.hero-left{
  position:relative;
  background:linear-gradient(135deg, var(--primary-deeper) 0%, var(--primary-dark) 65%, var(--primary) 100%);
  color:#fff;
  padding:78px 48px 78px;
  display:flex;
  align-items:center;
  overflow:hidden;
}
.hero-left-bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  opacity:.08;
}
.hero-left-overlay{
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 18% 22%, rgba(212,168,124,.22), transparent 38%),
    radial-gradient(circle at 84% 78%, rgba(199,55,44,.20), transparent 40%);
  pointer-events:none;
}
.hero-left-content{position:relative;z-index:2;max-width:540px}

.breadcrumb{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:11px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(255,255,255,.55);
  margin-bottom:24px;
  flex-wrap:wrap;
}
.breadcrumb a{transition:color .2s ease}
.breadcrumb a:hover .bc-item{color:var(--accent-warm)}
.bc-item{color:rgba(255,255,255,.55)}
.bc-sep{color:rgba(255,255,255,.3)}
.bc-current{color:var(--accent-warm)}

.hero-eyebrow{
  display:inline-block;
  font-size:11px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--accent-warm);
  margin-bottom:18px;
  line-height:1.4;
}
.hero-h1{
  font-family:"Inter Tight",sans-serif;
  font-size:clamp(1.9rem, 3.8vw, 2.6rem);
  line-height:1.1;
  letter-spacing:-.035em;
  font-weight:800;
  color:#fff;
  margin-bottom:18px;
}
.hero-sub{
  font-size:15.5px;
  color:rgba(255,255,255,.78);
  line-height:1.7;
}

.hero-right{
  position:relative;
  overflow:hidden;
  min-height:520px;
}
.hero-right img{
  width:100%;
  height:100%;
  object-fit:cover;
  position:absolute;
  inset:0;
}
.hero-right-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(135deg, rgba(42,9,8,.32) 0%, rgba(42,9,8,.08) 50%, rgba(42,9,8,.18) 100%);
}
@media(max-width:992px){.hero-right{min-height:360px}}

/* ===== SECTION D — STATS BAR ===== */
.stats-bar{
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  background:#fff;
  border-bottom:1px solid var(--line);
}
@media(max-width:980px){.stats-bar{grid-template-columns:1fr 1fr;border-left:1px solid var(--line);border-right:1px solid var(--line)}}
.stat{
  padding:28px 24px;
  text-align:center;
  border-right:1px solid var(--line);
}
.stat:last-child{border-right:none}
@media(max-width:980px){
  .stat:nth-child(2n){border-right:none}
  .stat{border-bottom:1px solid var(--line)}
}
.stat-n{
  font-family:"Inter Tight",sans-serif;
  font-size:clamp(1.7rem, 2.7vw, 2.1rem);
  line-height:1;
  font-weight:800;
  letter-spacing:-.04em;
  color:var(--primary);
  margin-bottom:8px;
}
.stat-l{font-size:12.5px;color:var(--text-mute);line-height:1.45}

/* ===== SECTION E — STANDARD SECTION ===== */
.sec{padding:78px 48px}
.sec.alt{background:#fff}
.sec.tinted{background:var(--bg-card)}
.sec.dark{background:var(--primary-deeper);color:#fff}
.sec.city{background:var(--primary-deep);color:#fff;position:relative;overflow:hidden}
.sec.city::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 18% 22%, rgba(212,168,124,.16), transparent 40%),
    radial-gradient(circle at 84% 78%, rgba(199,55,44,.14), transparent 40%);
  pointer-events:none;
}
.sec.city > *{position:relative;z-index:1}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:11px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--primary);
  margin-bottom:14px;
  line-height:1;
}
.eyebrow::before{
  content:"";
  width:42px;
  height:1px;
  flex-shrink:0;
  background:linear-gradient(90deg, var(--primary-bright) 0%, var(--primary) 45%, rgba(154,41,33,0) 100%);
}
.sec.dark .eyebrow,
.sec.city .eyebrow{color:var(--accent-warm)}
.sec.dark .eyebrow::before,
.sec.city .eyebrow::before{background:linear-gradient(90deg, var(--accent-warm) 0%, var(--accent-warm-deep) 45%, rgba(212,168,124,0) 100%)}

.sec-h2{
  font-family:"Inter Tight",sans-serif;
  font-size:32px;
  font-weight:800;
  color:var(--primary-deep);
  margin-bottom:14px;
  line-height:1.1;
  letter-spacing:-.03em;
}
.sec-h2.light{color:#fff}
.sec-lead{
  font-size:15.5px;
  color:var(--text-soft);
  line-height:1.7;
  max-width:760px;
  margin-bottom:40px;
}
.sec-lead.light{color:rgba(255,255,255,.72)}

/* ===== SECTION F — GLANCE GRID (AUTh at a glance) ===== */
.glance-grid{
  display:grid;
  grid-template-columns:1.3fr 1fr;
  gap:54px;
  align-items:start;
}
@media(max-width:980px){.glance-grid{grid-template-columns:1fr;gap:36px}}
.glance-text p{
  font-size:14.5px;
  color:var(--text-soft);
  line-height:1.75;
  margin-bottom:16px;
}
.glance-text p:last-child{margin-bottom:0}
.glance-text p strong{color:var(--text);font-weight:600}
.glance-facts{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
.glance-fact{
  background:var(--bg-card);
  border:1px solid var(--line);
  border-radius:6px;
  padding:22px 22px 24px;
  transition:transform var(--motion-fast) var(--motion-ease), box-shadow var(--motion-fast) var(--motion-ease);
}
.glance-fact:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(55,19,17,.06)}
.glance-fact-n{
  font-family:"Inter Tight",sans-serif;
  font-size:24px;
  font-weight:800;
  color:var(--primary);
  letter-spacing:-.035em;
  line-height:1;
  margin-bottom:8px;
}
.glance-fact-l{
  font-size:12.5px;
  color:var(--text-mute);
  line-height:1.55;
}

/* ===== SECTION G — RESEARCH & IMPACT (dark) ===== */
.research-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:14px;
  margin-bottom:32px;
}
@media(max-width:980px){.research-grid{grid-template-columns:1fr 1fr}}
@media(max-width:540px){.research-grid{grid-template-columns:1fr}}
.res-card{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.10);
  border-radius:8px;
  padding:24px 22px 26px;
  position:relative;
}
.res-card.placeholder::after{
  content:"placeholder";
  position:absolute;
  top:10px;
  right:10px;
  font-size:8.5px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(212,168,124,.55);
  padding:3px 6px;
  border:1px solid rgba(212,168,124,.25);
  border-radius:3px;
}
.res-n{
  font-family:"Inter Tight",sans-serif;
  font-size:34px;
  font-weight:800;
  color:#fff;
  line-height:1;
  letter-spacing:-.04em;
  margin-bottom:12px;
}
.res-l{
  font-size:13px;
  color:rgba(255,255,255,.7);
  line-height:1.6;
}

/* Research highlights — named recognition strip */
.research-highlights{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  padding-top:30px;
  border-top:1px solid rgba(255,255,255,.10);
}
@media(max-width:760px){.research-highlights{grid-template-columns:1fr}}
.res-highlight{
  display:flex;
  gap:16px;
  align-items:flex-start;
  padding:18px 20px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);
  border-radius:6px;
  position:relative;
}
.res-highlight.placeholder::after{
  content:"draft";
  position:absolute;
  top:10px;
  right:10px;
  font-size:8.5px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(212,168,124,.55);
  padding:3px 6px;
  border:1px solid rgba(212,168,124,.25);
  border-radius:3px;
}
.res-highlight-dot{
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--accent-warm);
  flex-shrink:0;
  margin-top:6px;
}
.res-highlight-title{
  font-family:"Inter Tight",sans-serif;
  font-size:14px;
  font-weight:700;
  letter-spacing:-.01em;
  color:#fff;
  line-height:1.3;
  margin-bottom:6px;
}
.res-highlight-body{
  font-size:12.5px;
  color:rgba(255,255,255,.55);
  line-height:1.6;
}

/* ===== SECTION H — THE TWO SCHOOLS (was three departments) ===== */
.dept-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}
@media(max-width:880px){.dept-grid{grid-template-columns:1fr;gap:16px}}
.dept-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:8px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  transition:transform var(--motion-fast) var(--motion-ease), box-shadow var(--motion-fast) var(--motion-ease);
}
.dept-card:hover{
  transform:translateY(-3px);
  box-shadow:0 18px 44px rgba(55,19,17,.10);
}
.dept-card-header{
  padding:28px 30px 24px;
  border-bottom:1px solid var(--line);
}
.dept-card-header.thess{background:linear-gradient(135deg, rgba(154,41,33,.06) 0%, rgba(154,41,33,.02) 100%)}
.dept-card-header.serres{background:linear-gradient(135deg, rgba(212,168,124,.15) 0%, rgba(212,168,124,.05) 100%)}
.dept-card-tag{
  display:inline-block;
  font-size:10px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  padding:4px 10px;
  border-radius:3px;
  margin-bottom:14px;
}
.dept-card-tag.thess{background:rgba(154,41,33,.12);color:var(--primary)}
.dept-card-tag.serres{background:rgba(212,168,124,.32);color:var(--accent-warm-deep)}
.dept-card-name{
  font-family:"Inter Tight",sans-serif;
  font-size:22px;
  font-weight:800;
  letter-spacing:-.025em;
  line-height:1.2;
  color:var(--primary-deep);
  margin-bottom:6px;
}
.dept-card-sub{
  font-size:12px;
  color:var(--text-mute);
  letter-spacing:.02em;
}
.dept-card-body{
  padding:24px 30px 28px;
  display:flex;
  flex-direction:column;
  flex:1;
}
.dept-card-body p{
  font-size:14px;
  color:var(--text-soft);
  line-height:1.7;
  margin-bottom:20px;
  flex:1;
}
.dept-card-stats{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  padding-top:16px;
  border-top:1px solid var(--line);
}
.dept-card-stat{
  font-size:11.5px;
  color:var(--text-soft);
  background:var(--bg-card);
  border:1px solid var(--line);
  border-radius:4px;
  padding:6px 11px;
  line-height:1.3;
}
.dept-card-stat strong{color:var(--primary-deep);font-weight:700}

/* ===== SECTION I — THESSALONIKI (city) ===== */
.city-image-row{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:10px;
  margin-bottom:36px;
}
@media(max-width:760px){.city-image-row{grid-template-columns:1fr}}
.city-img{
  position:relative;
  border-radius:6px;
  overflow:hidden;
  background:rgba(255,255,255,.04);
}
.city-img img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform 1000ms var(--motion-ease);
}
.city-img:hover img{transform:scale(1.04)}
.city-img-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(42,9,8,0) 50%, rgba(42,9,8,.25) 100%);
}

.city-grid{
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:48px;
  align-items:start;
  margin-bottom:42px;
}
@media(max-width:980px){.city-grid{grid-template-columns:1fr;gap:32px}}
.city-text p{
  font-size:14.5px;
  color:rgba(255,255,255,.72);
  line-height:1.75;
  margin-bottom:16px;
}
.city-text p:last-child{margin-bottom:0}
.city-text p strong{color:#fff;font-weight:600}

.city-cards{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.city-card{
  display:flex;
  gap:16px;
  align-items:flex-start;
  padding:18px 20px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.10);
  border-radius:6px;
}
.city-card-icon{
  font-size:22px;
  flex-shrink:0;
  width:38px;
  height:38px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(212,168,124,.12);
  border-radius:5px;
}
.city-card-title{
  font-family:"Inter Tight",sans-serif;
  font-size:14px;
  font-weight:700;
  letter-spacing:-.01em;
  color:#fff;
  line-height:1.3;
  margin-bottom:4px;
}
.city-card-body{
  font-size:12.5px;
  color:rgba(255,255,255,.6);
  line-height:1.6;
}

.cost-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:12px;
  margin-top:18px;
}
@media(max-width:980px){.cost-grid{grid-template-columns:1fr 1fr}}
@media(max-width:540px){.cost-grid{grid-template-columns:1fr}}
.cost-card{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.10);
  border-radius:6px;
  padding:20px 22px 22px;
}
.cost-n{
  font-family:"Inter Tight",sans-serif;
  font-size:22px;
  font-weight:800;
  letter-spacing:-.035em;
  color:var(--accent-warm);
  line-height:1;
  margin-bottom:8px;
}
.cost-l{
  font-size:12px;
  color:rgba(255,255,255,.55);
  line-height:1.55;
}

.city-image-row-2{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
@media(max-width:760px){.city-image-row-2{grid-template-columns:1fr}}

.city-cost-sub-h3{
  font-family:"Cormorant Garamond",serif;
  font-size:22px;
  font-weight:500;
  font-style:italic;
  color:#fff;
  letter-spacing:.005em;
  margin-bottom:6px;
  line-height:1.3;
}

/* ===== SECTION J — CAMPUS & STUDENT LIFE ===== */
.campus-grid{
  display:grid;
  grid-template-columns:1fr 1.3fr;
  gap:48px;
  align-items:start;
}
@media(max-width:980px){.campus-grid{grid-template-columns:1fr;gap:36px}}
.campus-img-wrap{
  display:grid;
  grid-template-rows:auto auto;
  gap:10px;
}
.campus-img{
  position:relative;
  border-radius:6px;
  overflow:hidden;
  background:var(--bg-card);
}
.campus-img img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform 1000ms var(--motion-ease);
}
.campus-img:hover img{transform:scale(1.04)}
.campus-img-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(42,9,8,0) 60%, rgba(42,9,8,.18) 100%);
}
.campus-text p{
  font-size:14.5px;
  color:var(--text-soft);
  line-height:1.75;
  margin-bottom:16px;
}
.campus-text p:last-child{margin-bottom:0}
.campus-text p strong{color:var(--text);font-weight:600}

/* ===== SECTION K — LEGACY (dark) ===== */
.legacy-grid{
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:54px;
  align-items:start;
}
@media(max-width:980px){.legacy-grid{grid-template-columns:1fr;gap:36px}}
.legacy-text p{
  font-size:14.5px;
  color:rgba(255,255,255,.72);
  line-height:1.75;
  margin-bottom:16px;
}
.legacy-text p:last-child{margin-bottom:0}
.legacy-text p strong{color:#fff;font-weight:600}

.legacy-timeline{
  position:relative;
  padding-left:32px;
}
.legacy-timeline::before{
  content:"";
  position:absolute;
  left:11px;
  top:6px;
  bottom:6px;
  width:1px;
  background:rgba(255,255,255,.18);
}
.timeline-item{
  position:relative;
  padding-bottom:22px;
}
.timeline-item:last-child{padding-bottom:0}
.timeline-item::before{
  content:"";
  position:absolute;
  left:-26px;
  top:6px;
  width:11px;
  height:11px;
  border-radius:50%;
  background:var(--accent-warm);
  border:2px solid var(--primary-deeper);
}
.timeline-year{
  font-family:"Inter Tight",sans-serif;
  font-size:11px;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--accent-warm);
  margin-bottom:5px;
}
.timeline-text{
  font-size:13px;
  color:rgba(255,255,255,.7);
  line-height:1.6;
}
.timeline-text strong{color:#fff;font-weight:600}

/* ===== SECTION L — APPLY BAND ===== */
.apply-band{
  background:var(--primary-deeper);
  color:#fff;
  padding:36px 48px;
  display:grid;
  grid-template-columns:1fr auto;
  gap:32px;
  align-items:center;
  position:relative;
  overflow:hidden;
}
.apply-band::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 88% 50%, rgba(212,168,124,.15), transparent 50%);
  pointer-events:none;
}
@media(max-width:768px){.apply-band{grid-template-columns:1fr;padding:28px 24px;gap:20px}}
.apply-band > *{position:relative;z-index:1}
.apply-eyebrow{
  font-size:10.5px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--accent-warm);
  margin-bottom:6px;
}
.apply-title{
  font-family:"Inter Tight",sans-serif;
  font-size:22px;
  font-weight:800;
  letter-spacing:-.025em;
  line-height:1.2;
  margin-bottom:4px;
}
.apply-sub{font-size:13px;color:rgba(255,255,255,.6);line-height:1.55}
.apply-actions{display:flex;gap:12px;flex-wrap:wrap}

/* ===== SECTION M — BUTTONS ===== */
.btn-gold-lg{
  background:var(--primary);
  color:#fff;
  padding:15px 32px;
  font-family:inherit;
  font-size:14px;
  font-weight:600;
  border:1px solid var(--primary);
  border-radius:3px 14px 14px 3px;
  cursor:pointer;
  text-decoration:none;
  display:inline-block;
  transition:background var(--motion-fast) var(--motion-ease), transform var(--motion-fast) var(--motion-ease);
}
.btn-gold-lg:hover{background:var(--accent-warm-deep);border-color:var(--accent-warm-deep);transform:translateY(-2px)}
.btn-outline-lt{
  background:transparent;
  color:#fff;
  padding:15px 32px;
  font-family:inherit;
  font-size:14px;
  font-weight:600;
  border:1.5px solid rgba(255,255,255,.45);
  border-radius:3px;
  cursor:pointer;
  text-decoration:none;
  display:inline-block;
  transition:background var(--motion-fast) var(--motion-ease), border-color var(--motion-fast) var(--motion-ease), transform var(--motion-fast) var(--motion-ease);
}
.btn-outline-lt:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.72);transform:translateY(-2px)}

/* ===== SECTION N — FOOTER ===== */
footer{background:var(--primary-deeper)}
.footer{padding:40px 48px 24px;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:42px}
.footer-top{background:var(--primary-deeper);border-bottom:1px solid rgba(255,255,255,.06)}
.footer-bottom-grid{background:var(--primary-deeper)}
.footer-brand{font-family:"Inter Tight",sans-serif;font-size:16px;font-weight:700;color:#fff;margin-bottom:8px;letter-spacing:-.015em}
.footer-brand span{color:var(--accent-warm)}
.footer-desc{font-size:12px;color:rgba(255,255,255,.42);line-height:1.65;max-width:280px}
.footer-head{font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.42);margin-bottom:14px}
.footer-subhead{margin-top:14px}
.footer-link{display:block;font-size:12px;color:rgba(255,255,255,.62);margin-bottom:8px;text-decoration:none;line-height:1.55;transition:.18s ease}
.footer-link:hover{color:var(--accent-warm);transform:translateX(2px)}
.footer-bottom{background:var(--primary-dark);border-top:1px solid rgba(255,255,255,.06);padding:16px 48px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
.footer-copy{font-size:11px;color:rgba(255,255,255,.34)}

/* ===== RESPONSIVE ===== */
@media(max-width:1200px){
  .nav,.sec,.footer,.footer-bottom,.apply-band,.stats-bar{padding-left:32px;padding-right:32px}
  .hero-left{padding:60px 32px}
}
@media(max-width:992px){
  .nav{padding:0 24px;overflow-x:auto;scrollbar-width:none}
  .nav::-webkit-scrollbar{display:none}
  .nav-link{padding:20px 12px}
  .nav-apply{margin-left:12px}
  .footer{grid-template-columns:1fr 1fr}
}
@media(max-width:768px){
  .nav{padding:0 18px}
  .nav-link{font-size:12px;padding:18px 10px}
  .nav-apply{font-size:12px;padding:9px 14px}
  .nav-logo-main{font-size:13.5px}
  .nav-logo-main small{font-size:10px}
  .sec{padding:56px 22px}
  .hero-left{padding:52px 22px}
  .sec-h2{font-size:26px}
  .sec-lead{font-size:14.5px;margin-bottom:32px}
  .apply-band{padding:26px 22px}
  .apply-title{font-size:19px}
  .footer{grid-template-columns:1fr;padding:32px 24px 20px;gap:28px}
  .footer-bottom{padding:14px 24px;flex-direction:column;align-items:flex-start}
}