/*
Theme Name: יציקל
Theme URI: https://yezikal.co.il
Description: תבנית ילד של Twenty Twenty-Five. דף הבית מוגש מ-front-page.php — HTML ו-CSS כתובים ביד, לפי ספר המותג של יציקל. פולין בשני משקלים (300, 600), פלטה סגורה, בלי צללים ובלי גלולות.
Author: יציקל
Template: twentytwentyfive
Version: 1.0.0
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 8.0
Text Domain: yezikal
*/

/* קומפוזיציה סגורה, רוחב תחום 1152. טקסט מימין בגריד א־סימטרי, ויזואל משמאל. */
:root{
  /* צבע — פלטה סגורה: שני משטחים, שלושה אפורים, אקסנט אחד */
  --paper:#F7F7F2; --ink:#121113; --accent:#FB5C07; --accent-ink:#C34A04;
  --card:#EDEDE7; --card-dark:#1E1D20;
  --muted:#5F5E5A; --muted-dark:#B4B2A9;
  --line:#D3D1C7; --line-dark:rgba(247,247,242,.15);
  /* טיפוגרפיה — חמישה גדלים ואחד לתצוגה */
  --f-body:"Polin",system-ui,sans-serif;
  --s1:0.9375rem;                              /* 15 — תוויות */
  --s2:1.25rem;                                /* 20 — גוף, כפתורים, רשימות */
  --s3:clamp(1.625rem,3vw,2.125rem);           /* 34 — כותרת משנה */
  --s4:clamp(2.125rem,5vw,3.5rem);             /* 56 — כותרת אזור */
  --s5:clamp(2.5rem,7.5vw,4.375rem);        /* הירו — 70px ביחס, שלוש שורות */
  /* צורה, ריווח, תנועה */
  --r-card:12px; --r-pill:8px;
  --air:clamp(2.5rem,5vw,4rem);                /* כותרת ← תוכן */
  --gut:max(1.25rem,env(safe-area-inset-left,0px));
  --gut-e:max(1.25rem,env(safe-area-inset-right,0px));
  --ease:cubic-bezier(.22,1,.36,1); --dur:.45s; --hdr-h:6.95rem;
  color-scheme:light;
}
*{box-sizing:border-box}
html{background:var(--paper)}
body{position:relative;margin-inline:auto;margin-block:0;max-width:1900px;background:var(--paper);color:var(--ink);font-family:var(--f-body);font-size:var(--s2);font-weight:300;line-height:1.4;letter-spacing:0;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,p,ul,ol,figure,table{margin:0}
b,strong,th,summary,legend{font-weight:600}
table{color:inherit}   /* quirks mode לא מוריש color לטבלאות */
ul,ol{padding:0;list-style:none}
img{display:block;max-width:100%}
a{color:inherit}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.wrap{max-width:1300px;margin-inline:auto;padding-inline:var(--gut) var(--gut-e)}
.band{padding-block:clamp(4.5rem,9vw,8.75rem)}
.dark{background:var(--ink);color:var(--paper)}
.soft{background:var(--card)}
h1{font-size:var(--s5);font-weight:600;line-height:.96;text-wrap:balance}
h2{font-size:var(--s4);font-weight:600;line-height:1.05;text-wrap:balance;max-width:18ch}
h3{font-size:var(--s3);font-weight:600;line-height:1.05}
.muted{color:var(--muted)}
.dark .muted{color:var(--muted-dark)}
.btn{display:inline-flex;align-items:center;gap:.65rem;min-height:3.25rem;padding:.75rem 2rem;border-radius:var(--r-pill);font-size:var(--s2);font-weight:600;text-decoration:none;border:2px solid transparent;transition:transform var(--dur) var(--ease)}
.btn-main{background:var(--accent);color:var(--ink)}
.btn-ghost{border-color:currentColor}
.btn:hover,.btn:focus-visible{transform:translateY(-3px)}
/* הדר — שקוף, יושב על התצלום */
.hdr{position:absolute;inset-block-start:0;inset-inline:0;z-index:20}
.hdr .wrap{display:flex;align-items:flex-start;gap:1.5rem;padding-block:2rem}
.mark{display:block;text-decoration:none;flex:none;color:var(--paper)}
.mark .logo{display:block;width:auto;height:2.2rem}
.ftr .mark .logo{height:1.75rem}
.nav{display:flex;gap:2rem;margin-inline:auto;font-size:var(--s1);padding-block-start:.55rem}
.nav a{position:relative;text-decoration:none;color:rgba(247,247,242,.85);padding-block:.4rem;transition:color var(--dur) var(--ease)}
.nav a:hover,.nav a.on{color:var(--accent)}
.nav a.on::after{content:"";position:absolute;inset-inline:0;inset-block-end:0;height:2px;background:var(--accent)}
.hdr .btn{flex:none;font-size:var(--s1);min-height:2.6rem;padding:.5rem 1.25rem;gap:.5rem;border-radius:.5rem}
.hdr .btn svg{width:1rem;height:1.2rem}
@media(max-width:980px){.nav{display:none}}
/* הירו — מסך מלא, טקסט מימין */
.hero{position:relative;isolation:isolate;overflow:hidden;background:var(--ink);color:var(--paper);display:flex;align-items:center;min-height:min(90svh,52rem)}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 46%;z-index:-2}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to left,rgba(18,17,19,.72) 0%,rgba(18,17,19,.52) 34%,rgba(18,17,19,.14) 66%,rgba(18,17,19,0) 100%)}
.hero .wrap{width:100%;padding-block:9rem 3rem}
.hero-txt{max-width:34rem}
.hero h1{font-size:var(--s5);line-height:.95;text-wrap:initial;max-width:none}
.hero .accent{color:var(--accent);font-weight:600}
.hero-meta{display:flex;align-items:center;gap:1rem;margin-block-start:2rem;font-size:1rem;color:rgba(247,247,242,.78)}
.hero-meta i{flex:none;width:1px;height:1.15em;background:rgba(247,247,242,.38)}
.hero-meta::after{content:"";flex:1;height:1px;background:rgba(247,247,242,.22)}
.hero p{margin-block:1.4rem 0;font-size:1.5rem;line-height:1.35;color:var(--paper);font-weight:300}
.hero-cta{display:flex;flex-wrap:wrap;gap:.8rem;margin-block-start:1.8rem}
.play{width:1.9rem;height:1.9rem;border-radius:50%;background:var(--paper);display:grid;place-items:center;flex:none}
.play svg{width:.62rem;height:.78rem;color:var(--accent)}
.btn-glass{border-color:rgba(247,247,242,.55);background:transparent}
.btn-pin{flex-direction:row-reverse}
@media(prefers-reduced-motion:no-preference){
  .hero-txt>*{animation:rise .8s var(--ease) both}
  .hero-txt>*:nth-child(2){animation-delay:.07s}
  .hero-txt>*:nth-child(3){animation-delay:.14s}
  .hero-txt>*:nth-child(4){animation-delay:.21s}
}
@keyframes rise{from{transform:translateY(18px)}to{transform:none}}
/* פס הוכחה מלא־רוחב, מוזאיקה של שתי תמונות */
.proof{display:grid;grid-template-columns:1.6fr 1fr;gap:4px}
.proof figure{aspect-ratio:16/7;overflow:hidden;min-width:0}
.proof img{width:100%;height:100%;object-fit:cover}
@media(max-width:780px){.proof{grid-template-columns:1fr}.proof figure{aspect-ratio:16/9}}
/* תמונה בכרטיס השוואה */
.old figure img{filter:grayscale(1)}
.shot{position:relative;border-radius:var(--r-card);overflow:hidden;background:var(--card-dark);aspect-ratio:4/3;min-width:0}
.shot img{width:100%;height:100%;object-fit:cover}
/* דסקטופ ≥1100 — כל העמוד יחסי: שורש = 1vw, רצפה 12px, תקרה 19px (≈1900) */
@media(min-width:1100px){
  :root{
    font-size:clamp(12px,1vw,19px);
    --s1:1rem; --s2:1.25rem; --s3:2.125rem; --s4:3.5rem; --s5:4.375rem;
    --air:4rem; --gut:1.6rem; --gut-e:1.6rem;
  }
  .wrap{max-width:1300px}
  .band{padding-block:8.75rem}
  .nav{gap:2.25rem}
    .spec-grid{gap:3.5rem}
    .hdr .wrap{padding-block:2.2rem}
  .hero .wrap{padding-block:var(--hdr-h) 0}
  /* התמונה קטנה מהמסגרת ועוגנת לשמאל־למטה: המוצר קטן יותר וכל הצנרת נראית.
     מה שמעליה הוא רקע הדיו של ההירו, והמסכה מטשטשת את הקצה העליון. */
  .hero-bg{object-position:50% 35%}   /* מלוא הרוחב · 30px נחתכים מלמעלה, 55px מלמטה */
  .hero-txt{max-width:44rem}
  .hero p{font-size:1.85rem;line-height:1.32;max-width:44rem;margin-block-start:1.1rem}
  .hero .btn{min-height:3.6rem;padding:.95rem 2rem;font-size:1.1rem;border-radius:.55rem}
      }
/* טאבלט ומובייל — ערכים קבועים */
@media(max-width:1099px){
  /* הירו נערם: התמונה בלוק עליון שנמס לתוך הרקע, הטקסט מתחתיה וממורכז */
  .hero{display:block;min-height:0}
  .hero-bg{position:relative;inset:auto;width:100%;height:min(42svh,21rem);
    object-fit:cover;object-position:34% 44%;z-index:0;
    -webkit-mask-image:linear-gradient(to bottom,#000 68%,transparent 100%);
            mask-image:linear-gradient(to bottom,#000 68%,transparent 100%)}
  .hero::after{display:none}
  .hero .wrap{padding-block:1.5rem 2.75rem}
  .hero-txt{max-width:none;text-align:center}
  .hero-cta{justify-content:center}
  .hero-meta{justify-content:center;flex-wrap:wrap}
  .hero-meta::after{display:none}
  .hero p{margin-block-start:1.1rem}
  .hdr .wrap{padding-block:1.4rem}
  .hdr .btn{min-height:2.75rem;padding:.55rem 1.1rem;font-size:var(--s1)}
    .shot{aspect-ratio:4/3}
  h2{text-align:center;margin-inline:auto}
}
@media(min-width:621px) and (max-width:1099px){
  .hero-bg{height:min(44svh,26rem)}
  .hero .wrap{padding-block:2rem 3rem}
}
@media(max-width:620px){
  .hero .wrap{padding-block:1.25rem 2.25rem}
  /* התמונה חתוכה למובייל, המוצר ממורכז, והיא נוגעת בקצה העליון */
  .hero-bg{object-position:50% 100%;height:min(46svh,24rem)}
  .hdr .btn{min-height:2.1rem;padding:.35rem .8rem;font-size:.8125rem;gap:.4rem;border-radius:.4rem}
  .hdr .btn svg{width:.85rem;height:1rem}
  .hero-meta{flex-wrap:wrap;gap:.45rem .85rem;margin-block-start:1.5rem}
  .hero-meta::after{display:none}
  .hero-cta .btn{flex:1 1 100%;justify-content:center}
}
/* וידאו */
.vid{position:relative;display:block;margin-block-start:var(--air);aspect-ratio:16/9;border-radius:var(--r-card);overflow:hidden;background:var(--card-dark);text-decoration:none}
.vid img{width:100%;height:100%;object-fit:cover;opacity:.4}
.vid-play{position:absolute;inset:0;margin:auto;width:5.5rem;height:5.5rem;background:var(--accent);display:grid;place-items:center;transition:transform var(--dur) var(--ease)}
.vid:hover .vid-play,.vid:focus-visible .vid-play{transform:scale(1.08)}
.vid-note{position:absolute;inset-block-end:1rem;inset-inline-start:1rem;font-size:var(--s1);color:var(--paper);background:rgba(18,17,19,.78);padding:.45rem 1rem;border-radius:var(--r-pill)}
/* שורת אמון */
/* השוואה */
/* למי זה מתאים — תמונה מימין לטקסט, הסקשן נכנס למסך אחד */
#who{padding-block:clamp(3.25rem,6.5vw,6rem)}
.who-head,.how-head{text-align:center}
.who-head .eyebrow{font-size:var(--s1);color:var(--muted);margin-block-end:1.1rem}
.who-head h2,.how-head h2{max-width:20ch;margin-inline:auto}
.who-head .lede,.how-head .lede{font-size:var(--s3);font-weight:300;color:var(--muted);line-height:1.3;margin-block-start:1.1rem}
.who{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;margin-block-start:clamp(2rem,3.5vw,3rem)}
.who li{display:grid;grid-template-columns:clamp(8.5rem,16vw,13rem) 1fr;gap:clamp(1rem,2vw,1.5rem);align-items:center;background:var(--paper);border-radius:var(--r-card);padding:clamp(.85rem,1.5vw,1.2rem);min-width:0}
.who figure{margin:0}
.who img{width:100%;height:auto;aspect-ratio:4/3;object-fit:contain;mix-blend-mode:multiply}
.who h3{font-size:var(--s2);margin-block-end:.5rem}
.who p{color:var(--muted);font-size:var(--s1);line-height:1.6}
@media(max-width:860px){.who{grid-template-columns:1fr}}
@media(max-width:520px){.who li{grid-template-columns:6.5rem 1fr;gap:.9rem;padding:.85rem}}
/* שלבים */
.steps{position:relative;display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(2.5rem,5vw,4rem) clamp(3.5rem,7vw,6rem);margin-block-start:clamp(2rem,3.5vw,3rem)}
.how-head .lede a{color:var(--accent-ink);text-decoration:underline;text-underline-offset:.25em;text-decoration-thickness:2px}
.how-head .lede a:hover,.how-head .lede a:focus-visible{color:var(--ink)}
.flow{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;overflow:visible}
.flow path{fill:none;stroke:var(--line);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.flow path.lit{stroke:var(--accent)}
.step{position:relative;z-index:1;display:grid;grid-template-columns:clamp(8rem,15vw,12.5rem) 1fr;gap:clamp(1rem,2vw,1.5rem);align-items:start;min-width:0;background:var(--paper);border-radius:var(--r-card);padding:clamp(1rem,1.8vw,1.4rem);border:2px solid var(--line);transition:background-color var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.step .num,.step h3,.step .muted,.step .step-note{transition:color var(--dur) var(--ease)}
.step.on{background:var(--accent);border-color:var(--accent)}
.step.on .num,.step.on h3,.step.on .muted,.step.on .step-note{color:var(--ink)}
.step figure{margin:0;border-radius:calc(var(--r-card) - 4px);overflow:hidden;aspect-ratio:4/3;background:var(--card)}
.step figure img{width:100%;height:100%;object-fit:cover}
.step .num{display:block;font-size:var(--s1);font-weight:600;color:var(--accent-ink);line-height:1;margin-block-end:.45rem}
.step h3{font-size:var(--s3);margin-block-end:.5rem}
.step .muted{font-size:var(--s1);line-height:1.6}
.step-note{margin-block-start:.5rem;font-size:var(--s1);color:var(--muted);line-height:1.5;opacity:.85}
@media(max-width:1024px){.steps{grid-template-columns:1fr;gap:1.25rem}.flow{display:none}}
@media(prefers-reduced-motion:reduce){.flow path{stroke:var(--accent)}}
/* מפרט */
.spec-grid{display:grid;grid-template-columns:.7fr 1.55fr;gap:clamp(1.75rem,4vw,3.5rem);align-items:start;margin-block-start:var(--air)}
.spec{overflow-x:auto;min-width:0}
.spec table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.spec th,.spec td{text-align:start;padding:1.05rem .75rem;border-block-end:1px solid var(--line-dark)}
.spec th{color:var(--muted-dark);font-weight:300;width:42%}
.spec td{font-weight:600}
@media(max-width:780px){.spec-grid{grid-template-columns:1fr}}
/* אינדקס יתרונות */
/* רכישה */
.buy-cta{display:flex;flex-wrap:wrap;gap:.875rem;margin-block-start:2rem}
/* שאלות */
/* המרה */
.cvt{background:var(--accent);color:var(--ink);text-align:center}
.cvt h2{margin-inline:auto}
.cvt p{max-width:42ch;margin:1.5rem auto var(--air);font-weight:300}
.cvt .btn-main{background:var(--ink);color:var(--paper)}
.cvt .foot{margin-block:1.75rem 0;font-size:var(--s1);font-weight:300}
/* פוטר */
.ftr{background:var(--ink);color:var(--muted-dark);padding-block:4rem;font-size:var(--s1)}
.ftr .wrap{display:flex;flex-wrap:wrap;gap:2.5rem;justify-content:space-between;align-items:flex-start}
.ftr a{text-decoration:none}
.ftr a:hover{color:var(--paper)}
.ftr h4{margin-block-end:.9rem;color:var(--paper);font-size:var(--s1);font-weight:600}
.ftr li{padding-block:.35rem}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* נקודות מכירה — סקשן שחור, משטחים לבנים, כתום לבחירה הפעילה */
#stores .wrap{max-width:1000px}
#stores h2{text-align:center;margin-inline:auto}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.st-filters{display:grid;grid-template-columns:auto 1fr 1.4fr;gap:.75rem;align-items:center;margin-block-start:var(--air)}
.seg{display:flex;gap:.4rem;background:var(--paper);border-radius:var(--r-pill);padding:.3rem}
.seg button{appearance:none;border:0;background:transparent;color:var(--ink);font:600 var(--s1)/1 var(--f-body);
  padding:.7rem 1.15rem;border-radius:calc(var(--r-pill) - 2px);cursor:pointer;white-space:nowrap;
  transition:background-color var(--dur) var(--ease),color var(--dur) var(--ease)}
.seg button[aria-pressed="true"]{background:var(--accent);color:var(--ink)}
.st-filters select,.st-filters input{width:100%;min-height:3.1rem;background:var(--paper);color:var(--ink);
  border:0;border-radius:var(--r-pill);padding:.7rem 1rem;font:300 var(--s1)/1.2 var(--f-body)}
.st-filters input::placeholder{color:var(--muted)}
.stores{margin-block-start:1.25rem;background:var(--paper);border-radius:var(--r-card);overflow:hidden;color:var(--ink)}
.stores li+li{border-block-start:1px solid var(--line)}
.st-row{display:grid;grid-template-columns:1fr auto;gap:1rem;align-items:center;width:100%;min-height:60px;
  background:transparent;border:0;cursor:pointer;text-align:start;padding:.85rem 1.25rem;
  font:300 var(--s1)/1.4 var(--f-body);color:var(--ink);transition:background-color var(--dur) var(--ease)}
.st-row:hover{background:var(--card)}
.st-row b{font-weight:600}
.st-row .addr{color:var(--muted)}
.st-row svg{transition:transform var(--dur) var(--ease);flex:none}
.st-row[aria-expanded="true"]{background:var(--card)}
.st-row[aria-expanded="true"] svg{transform:rotate(180deg)}
.st-panel{padding:0 1.25rem 1.1rem;display:flex;gap:.6rem;flex-wrap:wrap;background:var(--card)}
.st-panel .btn{min-height:2.9rem;font-size:var(--s1);padding:.6rem 1.35rem}
.st-panel .btn-main[disabled]{opacity:.45;cursor:not-allowed;pointer-events:none}
.st-copy{background:var(--paper);color:var(--ink);border:2px solid var(--ink)}
.st-copy:hover{background:var(--ink);color:var(--paper)}
.st-empty{margin-block-start:1.25rem;display:flex;gap:1rem;align-items:center;flex-wrap:wrap;color:var(--muted-dark)}
.st-more{margin-block-start:1.25rem}
.st-toast{position:fixed;inset-block-end:1.5rem;inset-inline-start:50%;transform:translateX(50%) translateY(1rem);
  background:var(--ink);color:var(--paper);border:1px solid var(--line-dark);padding:.7rem 1.2rem;border-radius:var(--r-pill);
  font-size:var(--s1);opacity:0;pointer-events:none;transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease);z-index:60}
.st-toast.on{opacity:1;transform:translateX(50%) translateY(0)}
@media(max-width:860px){.st-filters{grid-template-columns:1fr;gap:.6rem}.seg{overflow-x:auto}.seg button{flex:1}}
@media(max-width:560px){.st-row{grid-template-columns:1fr auto;padding:.8rem 1rem}
  .st-row .addr{display:block;margin-block-start:.15rem}
  .st-panel{padding:0 1rem 1rem}.st-panel .btn{flex:1 1 100%;justify-content:center}}

/* רקעי טקסטורה — התמונה מתחת לשכבת צבע של הפלטה, כדי שהטקסט יישאר קריא */
.band{background-size:cover;background-position:center;background-repeat:no-repeat}
#how{background-image:linear-gradient(rgba(247,247,242,.30),rgba(247,247,242,.30)),url("assets/images/bg-blueprint.jpg")}
#stores{background-image:linear-gradient(rgba(18,17,19,.32),rgba(18,17,19,.32)),url("assets/images/bg-concrete.jpg")}
@media(max-width:780px){
  #how,#stores,.cvt{background-attachment:scroll}
}

/* שאלות נפוצות — פתוחות, בלי אקורדיון */
.faq{margin-block-start:var(--air);display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(2rem,4vw,3rem) clamp(2.5rem,5vw,4rem)}
.faq .qa h3{font-size:var(--s2);margin-block-end:.6rem}
.faq .qa p{color:var(--muted-dark);font-size:var(--s1);line-height:1.65;max-width:52ch}
@media(max-width:780px){.faq{grid-template-columns:1fr;gap:1.75rem}}

/* טופס משווקים מורשים */
.deal-head{text-align:center}
.deal-head h2{max-width:22ch;margin-inline:auto}
.deal-head .lede{font-size:var(--s3);font-weight:300;color:var(--muted);margin-block-start:1rem}
.deal{margin-block-start:var(--air);max-width:1000px;margin-inline:auto;display:grid;grid-template-columns:repeat(2,1fr);gap:1.25rem clamp(1.25rem,3vw,2rem)}
.deal .f{display:flex;flex-direction:column;gap:.45rem;min-width:0}
.deal label{font-size:var(--s1);font-weight:600}
.deal input{min-height:3.25rem;background:var(--paper);color:var(--ink);border:2px solid var(--line);
  border-radius:var(--r-pill);padding:.7rem 1rem;font:300 var(--s1)/1.2 var(--f-body);
  transition:border-color var(--dur) var(--ease)}
.deal input:focus-visible{border-color:var(--accent);outline:0}
.deal input[aria-invalid="true"]{border-color:#A32D2D}
.deal .err{font-size:var(--s1);color:#A32D2D}
.deal-send{grid-column:1 / -1;display:flex;align-items:center;gap:1.25rem;flex-wrap:wrap;margin-block-start:.5rem}
.deal-note{font-size:var(--s1);color:var(--muted)}
.deal-note.ok{color:var(--accent-ink);font-weight:600}
@media(max-width:780px){.deal{grid-template-columns:1fr}.deal-send .btn{flex:1 1 100%;justify-content:center}}

/* מי עומד מאחורי יציקל — תמונה מימין, טקסט משמאל */
.about{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(2rem,5vw,4rem);align-items:center;margin-block-start:var(--air)}
.about-pic{margin:0;border-radius:var(--r-card);overflow:hidden;background:var(--card);aspect-ratio:4/5}
.about-pic img{width:100%;height:100%;object-fit:cover}
.about-txt h2{max-width:none;margin-block-end:1.5rem}
.about-txt p+p{margin-block-start:1.1rem}
.about-txt p{font-size:var(--s1);line-height:1.75;color:var(--muted);max-width:60ch}
.about-sign{font-weight:600;color:var(--ink) !important}
@media(max-width:860px){.about{grid-template-columns:1fr;gap:1.75rem}.about-pic{max-width:22rem;aspect-ratio:1}}
