.about-main{ padding:0; }
/* About page styles (scoped) */
.about-hero{ 
  position:relative; 
  min-height:85vh; 
  color:#fff; 
  width:100vw; 
  left:50%; 
  right:50%; 
  margin-left:-50vw; 
  margin-right:-50vw; 
  margin-top:0; 
  overflow:hidden; 
}
/* Remove any visual gap between header and hero on About */
body.about .site-header{ border-bottom:none; }
.about body{ margin:0; }
/* Force full-bleed main on About even if layout uses .container */
/* Nuke layout constraints on About main regardless of class */
body.about #main{ max-width:none !important; width:100vw !important; margin:0 !important; padding:0 !important; }
.about-hero-media{ 
  position:absolute; 
  inset:0; 
  overflow:hidden; 
  margin:0; 
}
.about-hero-media img{ 
  width:100%; 
  height:100%; 
  object-fit:cover; 
  object-position: top center; 
  display:block; 
}
.about-hero-video{ 
  width:100%; 
  height:100%; 
  object-fit:cover; 
  object-position:center; 
  display:block; 
}
.about-hero-overlay{ 
  position:absolute; 
  inset:0; 
  background: linear-gradient(135deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,.35) 50%, rgba(0,0,0,.55) 100%);
}
.about-hero-inner{ 
  position:relative; 
  z-index:1; 
  max-width: var(--container-max, 1200px); 
  margin:0 auto; 
  padding:0 var(--container-pad,24px) 80px; 
  display:grid; 
  gap:0; 
  align-content:end; 
  justify-items:center; 
  text-align:center; 
  min-height:85vh; 
}
.about-hero h1{ 
  margin:0 0 20px; 
  font-size: clamp(32px, 5.5vw, 56px); 
  font-weight:800;
  letter-spacing:-0.02em;
  background: linear-gradient(135deg, #ffffff 0%, #f0f0f0 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: 0 4px 20px rgba(0,0,0,.3);
}
.about-hero p{ 
  margin:0 0 32px; 
  max-width:50ch; 
  font-size: clamp(18px, 2.2vw, 22px); 
  line-height:1.5; 
  color:#f8f8f8; 
  font-weight:400;
  text-shadow: 0 2px 10px rgba(0,0,0,.2);
}
.about-hero .hero-actions{ 
  margin-top:0 !important; 
}

/* Bigger CTA button with modern styling */
.about-hero .btn.btn-lg{ 
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:16px 32px; 
  font-size:16px; 
  font-weight:600; 
  background: linear-gradient(135deg, var(--primary) 0%, #8b5cf6 100%);
  color:#fff; 
  border:2px solid transparent; 
  border-radius:50px;
  transition:all .3s ease; 
  box-shadow: 0 8px 32px rgba(108,43,217,.3);
  position:relative;
  overflow:hidden;
  text-decoration:none;
}
.about-hero .btn.btn-lg::before{
  content:'';
  position:absolute;
  inset:0;
  background: linear-gradient(135deg, rgba(255,255,255,.2) 0%, rgba(255,255,255,0) 100%);
  opacity:0;
  transition:opacity .3s ease;
}
.about-hero .btn.btn-lg:hover,
.about-hero .btn.btn-lg:focus{ 
  transform:translateY(-2px); 
  box-shadow: 0 12px 40px rgba(108,43,217,.4);
}
.about-hero .btn.btn-lg:hover::before{
  opacity:1;
}
.about-hero .btn.btn-lg:active{
  transform:translateY(0);
}
.about-hero .edge{ 
  position:absolute; 
  left:0; 
  right:0; 
  bottom:-1px; 
  height:24px; 
  background:linear-gradient(180deg, rgba(0,0,0,0.0), rgba(0,0,0,0)); 
}

.about-intro{ 
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  padding:80px 0; 
  position:relative;
  overflow:hidden;
}
.about-intro::before{
  content:'';
  position:absolute;
  inset:0;
  background: radial-gradient(ellipse at 50% 0%, rgba(108,43,217,.08) 0%, transparent 70%);
  pointer-events:none;
}
.about-intro .wrap{ 
  max-width: var(--container-max, 1200px); 
  margin:0 auto; 
  padding:0 var(--container-pad,24px); 
  position:relative;
  z-index:1;
}
.about-intro .lead{ 
  font-weight:600; 
  text-align:center; 
  font-size: clamp(20px, 3vw, 32px); 
  line-height:1.3; 
  margin:0 0 60px; 
  background: linear-gradient(135deg, #1e293b 0%, #475569 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.intro-carousel{ 
  overflow:hidden; 
  width:100vw; 
  margin-left:calc(50% - 50vw); 
  margin-right:calc(50% - 50vw); 
  background:rgba(255,255,255,.8);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border-radius:24px;
  padding:32px;
  box-shadow: 0 20px 40px rgba(0,0,0,.08);
  border:1px solid rgba(255,255,255,.3);
}
.intro-track{ 
  display:flex; 
  gap:32px; 
  width:100%; 
  animation: intro-loop 20s linear infinite; 
}
.intro-card{ 
  flex:0 0 min(320px, calc((100% - 64px) / 3)); 
  max-width:320px; 
  aspect-ratio: 16 / 9; 
  height:auto; 
  background:rgba(255,255,255,.9); 
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-radius:20px; 
  padding:40px; 
  position:relative; 
  display:flex; 
  align-items:center; 
  justify-content:center; 
  text-align:center; 
  box-shadow: 0 8px 32px rgba(0,0,0,.08), 0 1px 0 rgba(255,255,255,.5) inset;
  border:1px solid rgba(255,255,255,.3);
  transition:transform .3s ease;
}
.intro-card:hover{
  transform:translateY(-4px);
  box-shadow: 0 12px 40px rgba(0,0,0,.12), 0 1px 0 rgba(255,255,255,.6) inset;
}
.intro-card::before{ 
  content:"\201C"; 
  position:absolute; 
  top:20px; 
  left:40px; 
  font-size:120px; 
  color:var(--primary); 
  line-height:1; 
  opacity:0.3;
}
.intro-card p{ 
  margin:0; 
  padding-top:30px; 
  font-size: clamp(15px, 1.6vw, 18px); 
  line-height:1.4; 
  font-weight:500; 
  color:#1e293b;
}
@keyframes intro-loop{ 
  from{ transform: translateX(0); } 
  to{ transform: translateX(-50%); } 
}
.intro-cta{ 
  margin-top:48px; 
  text-align:center; 
}

/* Intro section button styling */
.about-intro .btn.btn-lg{ 
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:16px 32px; 
  font-weight:600; 
  border:2px solid var(--primary); 
  background:transparent; 
  color:var(--primary); 
  border-radius:50px; 
  font-size:16px;
  text-decoration:none;
  transition:all .3s ease;
  position:relative;
  overflow:hidden;
}
.about-intro .btn.btn-lg::before{
  content:'';
  position:absolute;
  inset:0;
  background: linear-gradient(135deg, var(--primary) 0%, #8b5cf6 100%);
  opacity:0;
  transition:opacity .3s ease;
  z-index:-1;
}
.about-intro .btn.btn-lg:hover{ 
  background:var(--primary); 
  color:#fff; 
  transform:translateY(-2px);
  box-shadow: 0 8px 24px rgba(108,43,217,.3);
}
.about-intro .btn.btn-lg:hover::before{
  opacity:1;
}
.about-intro .btn.btn-lg:active{
  transform:translateY(0);
}

/* Responsive Design */
@media (max-width: 980px){
  .about-intro{ padding:60px 0; }
  .about-highlights{ padding:60px 0; }
  .about-learn{ padding:60px 0; }
  .about-challenges{ padding:60px 0; }
  .intro-carousel{ padding:24px; }
  .cards-carousel{ padding:24px; }
  .ch-grid{ padding:32px; }
}

/* Tablet adjustments */
@media (max-width: 900px){
  .intro-track{ gap:24px; }
  .intro-card{ 
    flex-basis: calc((100% - 48px) / 3); 
    max-width:none; 
    padding:24px; 
  }
  .intro-card::before{ 
    font-size:80px; 
    left:24px; 
    top:16px; 
  }
  .intro-card p{ 
    font-size: 14px; 
  }
  /* Center highlights and stack on tablet too */
  .highlight, .highlight.reverse{ 
    grid-template-columns:1fr; 
    gap:32px; 
    justify-items:center; 
    text-align:center; 
    padding:32px;
  }
  .highlight .copy, .highlight.reverse .copy{ 
    grid-row:1 !important; 
    grid-column:1 !important; 
    max-width:560px; 
  }
  .highlight .media, .highlight.reverse .media{ 
    grid-row:2 !important; 
    grid-column:1 !important; 
    width:100%; 
    max-width:420px; 
    aspect-ratio:1/1; 
    justify-self:center; 
  }
  .ch-grid{ 
    grid-template-columns:repeat(2,1fr); 
    gap:24px; 
  }
}

/* Mobile adjustments */
@media (max-width: 760px){
  .about-hero h1{
    font-size: clamp(28px, 8vw, 40px);
  }
  .about-hero p{
    font-size: clamp(16px, 4vw, 18px);
  }
  .about-hero .btn.btn-lg{
    padding:14px 24px;
    font-size:15px;
  }
  .about-intro .lead{
    font-size: clamp(18px, 5vw, 24px);
  }
  .intro-track{ 
    gap:16px; 
    animation-duration: 15s; 
  }
  .intro-card{ 
    flex-basis: calc((100% - 32px) / 3); 
    padding:20px; 
  }
  .intro-card::before{ 
    font-size:60px; 
    left:20px; 
    top:12px; 
  }
  .intro-card p{ 
    font-size: 13px; 
  }
  .highlight, .highlight.reverse{
    padding:24px;
    gap:24px;
  }
  .highlight .copy h2{
    font-size: clamp(20px, 6vw, 24px);
  }
  .highlight .copy p{
    font-size: clamp(14px, 4vw, 16px);
  }
  .about-learn h2{
    font-size: clamp(24px, 6vw, 28px);
  }
  .about-challenges h2{
    font-size: clamp(24px, 6vw, 28px);
  }
  .ch-grid{
    grid-template-columns:1fr;
    gap:20px;
    padding:24px;
  }
  .ch-grid h3{
    font-size: clamp(18px, 5vw, 20px);
  }
}

@media (max-width: 600px){
  .intro-carousel{ padding:16px; }
  .cards-carousel{ padding:16px; }
  .ch-grid{ padding:20px; }
  .about-intro .btn.btn-lg{ 
    padding:14px 20px; 
    font-weight:500; 
    border:2px solid var(--primary); 
    background:transparent; 
    color:var(--primary); 
    border-radius:50px; 
    margin-top: 32px;
    font-size:15px;
  }
  .about-intro .btn.btn-lg:hover{ 
    background:var(--primary); 
    color:#fff; 
  }
  .about-challenges .btn.btn-lg{
    padding:14px 24px;
    font-size:15px;
  }
}

@media (max-width: 480px){
  .about-hero .hero-inner{
    padding:0 var(--container-pad,16px) 60px;
  }
  .about-hero h1{
    font-size: clamp(24px, 10vw, 32px);
  }
  .about-hero p{
    font-size: clamp(14px, 5vw, 16px);
  }
  .about-hero .btn.btn-lg{
    padding:12px 20px;
    font-size:14px;
  }
  .intro-card{
    padding:16px;
  }
  .intro-card::before{
    font-size:50px;
    left:16px;
    top:10px;
  }
  .intro-card p{
    font-size:12px;
  }
  .highlight, .highlight.reverse{
    padding:20px;
  }
  .ch-grid{
    padding:16px;
  }
}
.about-highlights .wrap{ 
  max-width: var(--container-max, 1200px); 
  margin:0 auto; 
  padding:0 var(--container-pad,24px); 
  display:grid; 
  gap:80px; 
}
.highlight{ 
  display:grid; 
  grid-template-columns:minmax(0,1fr) minmax(0,1fr); 
  gap:48px; 
  align-items:center; 
  background:rgba(255,255,255,.8);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border-radius:24px;
  padding:48px;
  box-shadow: 0 20px 40px rgba(0,0,0,.08);
  border:1px solid rgba(255,255,255,.3);
  transition:transform .3s ease;
}
.highlight:hover{
  transform:translateY(-4px);
  box-shadow: 0 24px 48px rgba(0,0,0,.12);
}
.highlight.reverse{ 
  grid-template-columns:1fr 1fr; 
}
.highlight .copy{ 
  grid-column:1; 
}
.highlight .media{ 
  grid-column:2; 
}
.highlight.reverse .copy{ 
  grid-column:2; 
}
.highlight.reverse .media{ 
  grid-column:1; 
}
/* Ensure both items stay on the same grid row */
.highlight .copy, .highlight .media{ 
  grid-row:1; 
}
.highlight.reverse .copy, .highlight.reverse .media{ 
  grid-row:1; 
}
.highlight .media{ 
  margin:0; 
  border-radius:20px; 
  overflow:hidden; 
  aspect-ratio: 1 / 1; 
  width: clamp(280px, 40vw, 500px); 
  max-width:100%; 
  box-shadow: 0 12px 32px rgba(0,0,0,.15);
  transition:transform .3s ease;
}
.highlight .media:hover{
  transform:scale(1.02);
}
.highlight .media img{ 
  width:100%; 
  height:100%; 
  object-fit:cover; 
  display:block; 
}
.highlight .media{ 
  justify-self:end; 
}
.highlight.reverse .media{ 
  justify-self:start; 
}
.highlight .copy h2{ 
  margin:0 0 16px; 
  font-size: clamp(24px,3.5vw,36px); 
  font-weight:700;
  background: linear-gradient(135deg, #1e293b 0%, #475569 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
/* Limit text measure and increase paragraph size on desktop */
.highlight .copy{ 
  max-width: 560px; 
}
.highlight .copy p{ 
  font-size: clamp(16px, 1.8vw, 20px); 
  line-height:1.6; 
  font-weight:400; 
  color:#64748b;
}

/* Individual Highlight CTA Buttons */
.highlight-cta {
  margin-top: 24px;
}

.highlight-cta .btn {
  display: inline-block;
  padding: 14px 28px;
  font-size: 17px;
  font-weight: 700;
  border-radius: 10px;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 6px 18px rgba(102, 126, 234, 0.25);
  letter-spacing: 0.3px;
}

.highlight-cta .btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(102, 126, 234, 0.35);
}

.about-learn{ 
  padding:80px 0; 
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  position:relative;
  overflow:hidden;
}
.about-learn::before{
  content:'';
  position:absolute;
  inset:0;
  background: radial-gradient(ellipse at 50% 0%, rgba(108,43,217,.08) 0%, transparent 70%);
  pointer-events:none;
}
.about-learn .wrap{ 
  max-width: var(--container-max, 1200px); 
  margin:0 auto; 
  padding:0 var(--container-pad,24px); 
  position:relative;
  z-index:1;
}
.about-learn h2{ 
  font-size: clamp(28px, 4vw, 38px); 
  font-weight:700;
  text-align:center;
  margin:0 0 60px; 
  background: linear-gradient(135deg, #1e293b 0%, #475569 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.cards-carousel{ 
  position:relative; 
  overflow:hidden; 
  background:rgba(255,255,255,.8);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border-radius:24px;
  padding:32px;
  box-shadow: 0 20px 40px rgba(0,0,0,.08);
  border:1px solid rgba(255,255,255,.3);
}
.c-track{ 
  display:flex; 
  gap:32px; 
  transition: transform .4s ease; 
  will-change: transform; 
}
.c-card{ 
  flex:0 0 calc((100% - 64px)/3); 
  background:rgba(255,255,255,.9); 
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.3); 
  border-radius:20px; 
  overflow:hidden; 
  display:flex; 
  flex-direction:column; 
  transform:scale(.95); 
  transition: all .3s ease; 
  position:relative;
  box-shadow: 0 8px 32px rgba(0,0,0,.08), 0 1px 0 rgba(255,255,255,.5) inset;
}
.c-card::before{
  content:'';
  position:absolute;
  inset:0;
  background: linear-gradient(135deg, rgba(108,43,217,.05) 0%, rgba(108,43,217,.02) 100%);
  opacity:0;
  transition:opacity .3s ease;
  z-index:1;
}
.c-card.is-center{ 
  transform:scale(1.03); 
  box-shadow:0 20px 40px rgba(0,0,0,.12), 0 1px 0 rgba(255,255,255,.6) inset;
}
.c-card.is-center::before{
  opacity:1;
}
.c-card:hover{
  transform:translateY(-4px);
  box-shadow:0 16px 40px rgba(0,0,0,.12), 0 1px 0 rgba(255,255,255,.6) inset;
}
.c-card:hover::before{
  opacity:1;
}
.c-media{ 
  aspect-ratio: 16 / 9; 
  overflow:hidden; 
  background:#000; 
  display:block; 
  margin:0; 
  position:relative;
}
.c-media img{ 
  width:100%; 
  height:100%; 
  object-fit:cover; 
  display:block; 
  margin:0; 
  transition:transform .3s ease;
}
.c-card:hover .c-media img{
  transform:scale(1.05);
}
.c-body{ 
  padding:24px; 
  display:grid; 
  gap:12px; 
  position:relative;
  z-index:2;
}
.c-body h3{ 
  margin:0; 
  font-size:1.25rem; 
  font-weight:700;
  color:#1e293b;
}
.c-body p{ 
  margin:0; 
  font-size:1rem; 
  color:#64748b; 
  line-height:1.5;
}
.c-link{ 
  color:var(--primary); 
  text-decoration:none; 
  font-weight:600; 
  font-size:15px;
  transition:color .3s ease;
}
.c-link:hover{ 
  color:#8b5cf6; 
}
.c-btn{ 
  position:absolute; 
  top:50%; 
  transform:translateY(-50%); 
  width:56px; 
  height:56px; 
  border-radius:50%; 
  border:2px solid rgba(255,255,255,.8); 
  background:rgba(255,255,255,.9); 
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  display:grid; 
  place-items:center; 
  cursor:pointer; 
  box-shadow: 0 8px 24px rgba(0,0,0,.15); 
  transition: all .3s ease; 
  z-index:3; 
  color:var(--primary);
  font-size:20px;
  font-weight:bold;
}
.c-btn:hover{ 
  background:var(--primary); 
  color:#fff; 
  transform:translateY(-50%) scale(1.1);
  box-shadow: 0 12px 32px rgba(108,43,217,.3);
}
.c-btn.prev{ left:16px; } 
.c-btn.next{ right:16px; }

.about-challenges{ 
  padding:80px 0; 
  background: #fff;
}
.about-challenges .wrap{ 
  max-width: var(--container-max, 1200px); 
  margin:0 auto; 
  padding:0 var(--container-pad,24px); 
}
.about-challenges h2{ 
  text-align:center; 
  font-size: clamp(28px, 4vw, 38px); 
  font-weight:700;
  margin:0 0 60px; 
  background: linear-gradient(135deg, #1e293b 0%, #475569 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Quote squares marquee */
/* removed marquee */

.ch-grid{ 
  display:grid; 
  grid-template-columns:repeat(3,1fr); 
  gap:32px; 
  background:rgba(255,255,255,.8);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border-radius:24px;
  padding:48px;
  box-shadow: 0 20px 40px rgba(0,0,0,.08);
  border:1px solid rgba(255,255,255,.3);
}
.ch-grid h3{ 
  margin:0 0 20px; 
  font-size: clamp(20px,2.5vw,24px); 
  font-weight:700;
  color:#1e293b;
  line-height:1.3;
}
.ch-grid ul{ 
  margin:0; 
  padding-left:0; 
  display:grid; 
  gap:12px; 
  list-style:none;
}
.ch-grid li{
  position:relative;
  padding-left:24px;
  font-size:15px;
  color:#64748b;
  line-height:1.5;
}
.ch-grid li::before{
  content:'';
  position:absolute;
  left:0;
  top:50%;
  transform:translateY(-50%);
  width:6px;
  height:6px;
  background: linear-gradient(135deg, var(--primary) 0%, #8b5cf6 100%);
  border-radius:50%;
}

/* CTA button style per spec */
.about-challenges .btn.btn-lg{ 
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:16px 32px; 
  font-weight:600; 
  border:2px solid var(--primary); 
  background:transparent; 
  color:var(--primary); 
  border-radius:50px; 
  transition:all .3s ease;
  text-decoration:none;
  font-size:16px;
}
.about-challenges .btn.btn-lg:hover{ 
  background:var(--primary); 
  color:#fff; 
  transform:translateY(-2px);
  box-shadow: 0 8px 24px rgba(108,43,217,.3);
}
.ch-cta{ 
  text-align:center; 
  margin-top:60px; 
}

.about-contact{ padding:56px 0; background:var(--grey-050); }
.about-contact .wrap{ max-width: var(--container-max, 1200px); margin:0 auto; padding:0 var(--container-pad,24px); }
.about-contact .calendar-embed{ margin-top:16px; border:1px dashed var(--surface-alt); border-radius:12px; min-height:320px; display:grid; place-items:center; background:#fff; color:var(--muted); }
.cta-row{ margin-top:12px; }
/* WhatsApp button (match home page) */
.about-contact .btn-whatsapp{
  display:inline-block; padding:12px 18px; border-radius:10px;
  background:#4fd04d; color:#fff; text-decoration:none; font-weight:bold;
  border:2px solid #4fd04d; transition:filter .2s ease;
}
.about-contact .btn-whatsapp:hover,
.about-contact .btn-whatsapp:focus{ filter:brightness(0.95); }

@media (max-width: 900px){
  .quote-row{ grid-template-columns:1fr; }
  .highlight, .highlight.reverse{ grid-template-columns:1fr; }
  .highlight .media{ max-width: 100%; }
  /* Scope these to the Books carousel so About cards sizing isn't affected */
  .books .c-card{ flex-basis: calc((100% - 16px)/2); }
  .books .c-card img{ height:140px; }
}
@media (max-width: 600px){
  .books .c-card{ flex-basis: 100%; }
  .books .c-card img{ height:120px; }
  /* Keep tighter spacing below icon on mobile */
  .intro-card p{ padding-top:22px; }
  /* Stack highlights vertically: text first, then image */
  .highlight, .highlight.reverse{ grid-template-columns:1fr; gap:20px; }
  .highlight .copy, .highlight.reverse .copy{ grid-row:1 !important; text-align:center; max-width:520px; padding:0 12px; justify-self:center; }
  .highlight .media, .highlight.reverse .media{
    grid-row:2 !important; width:100%; max-width:360px; min-width:260px; aspect-ratio:1/1;
    justify-self:center; display:block;
  }
  .highlight .media img{ width:100%; height:100%; display:block; object-fit:cover; }
  /* Full-bleed container on mobile, content centered */
  .about-highlights .wrap{
    width:100vw;
    margin-left:calc(50% - 50vw);
    margin-right:calc(50% - 50vw);
    padding-left: var(--container-pad,24px);
    padding-right: var(--container-pad,24px);
    display:grid;
    justify-items:center;
  }
  /* Challenges grid: 2 columns on mobile */
  .ch-grid{ grid-template-columns:repeat(2,1fr); }
}