/* =========================================================================
   依緹美學 EASY BEAUTY — 精緻層（內頁）polish-inner.css（2026-09-23）
   -------------------------------------------------------------------------
   對象：療程分類頁 .tcat、療程內頁 .tdetail、文章內頁與個資頁 .article
   這三頁原本只有「淡入」一種動作，是全站最平、卻是搜尋流量最主要的落地頁。

   原則同精緻層：只加不改。
   ・全部規則都掛在頁面自己的類別底下，不會影響其他頁。
   ・動作幅度一律克制（位移 ≤ 4px、縮放 ≤ 1.03），要的是質感不是動感。
   ・進場狀態掛在 html.p-js 之下，JS 失效時全部內容照常顯示。
   ========================================================================= */

/* ============================================================
   一、療程分類頁 .tcat
   ============================================================ */

/* 背景的超大英文字（品牌調性的「留白裝飾」），由 site.js 的視差帶動 */
.tcat{position:relative;overflow:hidden;}
/* 尺寸與色值刻意與品牌頁 .intro__ghost、消息頁 .lead__ghost 完全一致，
   讓「背景大字」在全站是同一個設計語彙，而不是這一頁自己的東西。 */
.tcat__ghost{
  top:8%;
  left:50%;
  transform:translateX(-50%);
  font-size:clamp(72px,15vw,215px);
  color:rgba(157,117,83,.05);
  z-index:0;
}
.tcat__in{position:relative;z-index:1;}

/* 卡片：hover 時底部金線由左展開，是整張卡最明確的「被選中」訊號 */
.tcard::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;
  height:2px;
  background:var(--gold);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .55s var(--ease);
}
@media (hover:hover){
  .tcard:hover::after{transform:scaleX(1);}
  /* 內容整體極輕微上浮；編號同時退成更淡的金色，讓視線交棒給標題 */
  .tcard{transition:background .45s var(--ease),transform .55s var(--ease);}
  .tcard:hover{transform:translateY(-3px);}
  .tcard__no{transition:color .45s var(--ease),transform .55s var(--ease);}
  .tcard:hover .tcard__no{color:var(--gold-lt);transform:translateY(-2px);}
  .tcard__more{transition:color .45s var(--ease),border-color .45s var(--ease);}
  .tcard:hover .tcard__more{color:var(--ink-2);border-top-color:var(--gold-lt);}
}

/* 其他分類的膠囊按鈕：hover 時底線展開，與卡片同一套語彙 */
@media (hover:hover){
  .tcat__others .chip{
    background-image:linear-gradient(var(--gold),var(--gold));
    background-repeat:no-repeat;
    background-position:50% calc(100% - 6px);
    background-size:0 1px;
    transition:background-size .5s var(--ease),color .4s var(--ease),border-color .4s var(--ease);
  }
  .tcat__others .chip:hover{background-size:60% 1px;color:var(--brand);}
}

/* ============================================================
   二、療程內頁 .tdetail
   ============================================================ */

/* 每個段落標題前的金線改為隨區塊進場展開（原本是固定的 22px） */
html.p-js .tdetail .mblk h4::before{
  width:0;
  transition:width .8s .2s var(--ease);
}
html.p-js .tdetail .mblk[data-rv].in h4::before{width:22px;}

/* 條列項目的小圓點：進場時由 0 放大，替長段落建立節奏 */
html.p-js .tdetail .mblk li::before{
  transform:scale(0);
  transition:transform .5s var(--ease);
}
html.p-js .tdetail .mblk[data-rv].in li::before{transform:none;}
html.p-js .tdetail .mblk[data-rv].in li:nth-child(1)::before{transition-delay:.20s;}
html.p-js .tdetail .mblk[data-rv].in li:nth-child(2)::before{transition-delay:.26s;}
html.p-js .tdetail .mblk[data-rv].in li:nth-child(3)::before{transition-delay:.32s;}
html.p-js .tdetail .mblk[data-rv].in li:nth-child(4)::before{transition-delay:.38s;}
html.p-js .tdetail .mblk[data-rv].in li:nth-child(n+5)::before{transition-delay:.44s;}

/* 常見問題：展開時答案淡入上移（原本只有高度變化，內容是「被擠出來」的） */
.tdetail .qa__a > *{
  opacity:0;
  transform:translateY(-6px);
  transition:opacity .45s .12s var(--ease),transform .45s .12s var(--ease);
}
.tdetail .qa.open .qa__a > *{opacity:1;transform:none;}
/* 問句本身在滑過時，左側的加號微微放大 */
@media (hover:hover){
  .tdetail .qa__q i{transition:transform .4s var(--ease);}
  .tdetail .qa__q:hover i{transform:scale(1.18);}
}

/* 側欄的同分類療程：目前所在的那一項加一個金色小方塊，位置感更明確 */
.tdetail .tside li a{position:relative;}
.tdetail .tside li a[aria-current="page"]::before{
  content:"";
  position:absolute;
  left:-14px;top:50%;
  width:4px;height:4px;
  margin-top:-2px;
  background:var(--gold);
}

/* 預約卡片：滑過時浮起一層極淡的暖影，提示它是可以按的 */
@media (hover:hover){
  .tdetail .tside--cta{
    transition:box-shadow .6s var(--ease),transform .6s var(--ease);
  }
  .tdetail .tside--cta:hover{
    box-shadow:0 14px 40px -22px rgba(60,24,12,.35);
    transform:translateY(-2px);
  }
}

/* 文末提醒：左側那條金線改為由上往下畫出來 */
html.p-js .tdetail__note{position:relative;border-left-color:transparent;}
html.p-js .tdetail__note::before{
  content:"";
  position:absolute;
  left:-2px;top:0;
  width:2px;height:100%;
  background:var(--gold);
  transform:scaleY(0);
  transform-origin:top center;
  transition:transform .9s .3s var(--ease);
}
html.p-js .tdetail__note.in::before{transform:none;}

/* ============================================================
   三、文章內頁 .article（個資告知頁同一套版型，一併受益）
   ============================================================ */

/* 首段當作引言：字級與顏色都往上一階，替長文開一個好的起手式。
   :first-of-type 只挑第一個 <p>，若文章開頭是圖片或標題則不作用。 */
.article .prose > p:first-of-type{
  font-size:var(--fs-lg);
  line-height:var(--lh-loose);
  color:var(--ink);
  letter-spacing:.05em;
}

/* 內文標題前加一段短金線，讓長文的層級一眼看得出來 */
.article .prose h2,
.article .prose h3{position:relative;}
.article .prose h2::before{
  content:"";
  display:block;
  width:26px;height:1px;
  margin-bottom:.7em;
  background:var(--gold);
}

/* 引用段落：補一個大引號，維持明體的文氣 */
.article .prose blockquote{position:relative;}
.article .prose blockquote::before{
  content:"\201C";
  position:absolute;
  left:10px;top:-2px;
  font-family:var(--ff-en);
  font-size:46px;
  line-height:1;
  color:var(--gold-lt);
  pointer-events:none;
}
.article .prose blockquote > *:first-child{position:relative;}

/* 內文圖片：一層很淡的暖影，讓圖片從象牙白底上「浮」起來 */
.article .prose img{
  box-shadow:0 18px 44px -30px rgba(60,24,12,.45);
}

/* 日期與分類之間的分隔點改為金色 */
.article__meta{display:inline-flex;align-items:center;gap:10px;}

/* 延伸閱讀的卡片 */
@media (hover:hover){
  .related .post{
    position:relative;
    transition:transform .55s var(--ease),background .45s var(--ease);
  }
  .related .post::after{
    content:"";
    position:absolute;
    left:0;right:0;bottom:0;
    height:2px;
    background:var(--gold);
    transform:scaleX(0);
    transform-origin:left center;
    transition:transform .55s var(--ease);
  }
  .related .post:hover{transform:translateY(-3px);}
  .related .post:hover::after{transform:scaleX(1);}
  .related .post h3{transition:color .4s var(--ease);}
  .related .post:hover h3{color:var(--brand);}
  .related .post__arrow{display:inline-block;transition:transform .4s var(--ease);}
  .related .post:hover .post__arrow{transform:translateX(5px);}
}

/* ============================================================
   四、關閉動效
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  .tcard,.tcard__no,.tcard__more,.tcat__others .chip,
  .related .post,.related .post h3,.related .post__arrow,
  .tdetail .tside--cta,.tdetail .qa__q i{transition:none;}
  .tcard::after,.related .post::after{transition:none;}
  html.p-js .tdetail .mblk h4::before{width:22px;transition:none;}
  html.p-js .tdetail .mblk li::before{transform:none;transition:none;}
  .tdetail .qa__a > *{opacity:1;transform:none;transition:none;}
  html.p-js .tdetail__note{border-left-color:var(--gold);}
  html.p-js .tdetail__note::before{display:none;}
}

/* ============================================================
   五、療程卡片的圖文版型（2026-09-23 第三批）
   每個療程都有自己的形象照之後，分類頁的卡片由純文字改為
   「滿版圖 ＋ 文字區」。所有分類都套同一組比例與間距，
   不論該分類有 4 個還是 8 個療程，版面節奏都一致。
   ============================================================ */
.tcat__grid .tcard{
  padding:0;                /* 原本的內距改由 .tcard__body 負責，圖片才能滿版 */
  min-height:0;
}
.tcard--noimg .tcard__body{padding:clamp(28px,3.4vw,46px);}

.tcard__fig{
  display:block;
  position:relative;
  overflow:hidden;
  aspect-ratio:4/3;         /* 固定比例：每張卡的圖一樣高，橫向對齊不會參差 */
  background:var(--sand);
}
.tcard__fig img{
  width:100%;height:100%;
  object-fit:cover;
  transition:transform 1.4s var(--ease),filter .6s var(--ease);
}
/* 圖片下緣壓一層極淡的暖色，讓圖與文字區之間有過渡、不會硬切 */
.tcard__fig::after{
  content:"";
  position:absolute;inset:auto 0 0 0;height:38%;
  background:linear-gradient(to top,rgba(255,254,242,.55),transparent);
  pointer-events:none;
}
.tcard__body{
  display:flex;
  flex-direction:column;
  flex:1;
  padding:clamp(22px,2.4vw,32px) clamp(24px,2.6vw,34px) clamp(20px,2.2vw,28px);
}
.tcard__body h3{margin:14px 0 12px;}

@media (hover:hover){
  .tcard:hover .tcard__fig img{transform:scale(1.05);}
}

/* 手機版：圖略扁一點，一頁能看到的療程比較多 */
@media (max-width:640px){
  .tcard__fig{aspect-ratio:16/10;}
}

@media (prefers-reduced-motion:reduce){
  .tcard__fig img{transition:none;}
}

/* ============================================================
   六、療程內頁改為閱讀式版型（2026-09-23，依客戶指示）
   拿掉滿版 Banner，改成「麵包屑 → 分類 → 標題 → 代表圖 → 內文」。
   重點回到內容本身的閱讀節奏，代表圖只出現一次、佔一個明確的位置。
   ============================================================ */

/* 沒有 Banner 之後，頁面最上方要自己空出固定導覽列的高度 */
.crumb--top{
  padding-top:calc(var(--nav-h) + clamp(22px,3vw,38px));
}

/* 標題區：原本的下方分隔線移到代表圖之後，標題與圖之間不要被切斷 */
.tdetail--lead .tdetail__head{
  border-bottom:0;
  padding-bottom:0;
  margin-bottom:clamp(20px,2.4vw,30px);
}
.tdetail--lead .tdetail__head h1{
  font-family:var(--ff-tc);
  font-size:clamp(27px,3.4vw,46px);
  font-weight:400;
  letter-spacing:.1em;
  line-height:1.45;
  margin:14px 0 0;
}
/* 分類英文小標，接住原本 Banner 上那組英文字的角色 */
.tdetail__en{
  font-family:var(--ff-en);
  font-size:var(--fs-sm);
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--ink-3);
  margin:12px 0 0;
}

/* 代表圖：客戶指定 1.11:1（與首頁療程彈窗 .modal__fig 相同，2026-10-07 由 3:2 改），圖下一條細線收邊，右下角一行極小的說明 */
.tfig{
  margin:0 auto clamp(30px,4vw,48px);   /* 左右 auto：限寬後置中｜2026-10-07 */
  padding:0 0 clamp(14px,1.6vw,20px);
  border-bottom:1px solid var(--line);
  overflow:hidden;
  /* 1.11:1 撐滿內容欄會高達約 750px，把文字推出畫面；限制最大寬度 520px（高約 468px），比例不變｜2026-10-07 */
  max-width:520px;
}
.tfig img{
  display:block;
  width:100%;
  aspect-ratio:1110/1000;   /* = 1.11:1 */
  object-fit:cover;
  transition:transform 1.6s var(--ease);
}
html.p-js .tfig img{transform:scale(1.035);}     /* 進場時鏡頭緩緩穩下來 */
html.p-js .tfig.in img{transform:none;}
.tfig figcaption{
  margin-top:12px;
  font-family:var(--ff-sans);
  font-size:var(--fs-2xs);
  letter-spacing:.2em;
  color:var(--ink-3);
  text-align:right;
}

/* 手機版：代表圖與桌機同為 1.11:1（原本是 4:3） */
@media (max-width:640px){
  .tfig img{aspect-ratio:1110/1000;}
  .crumb--top{padding-top:calc(var(--nav-h) + 18px);}
}

@media (prefers-reduced-motion:reduce){
  html.p-js .tfig img{transform:none;transition:none;}
}

/* ============================================================
   七、療程內文的三種呈現方式（2026-09-23）
   依內容本身的性質決定呈現：
   ・療程方式  有明確先後順序 → 做成步驟流程圖
   ・適合對象  是一串條件判斷 → 做成核取清單
   ・療程優勢  是並列的特點   → 做成編號網格
   ・簡介／為什麼選擇 沒有結構 → 精緻的文字排版
   點滴類療程沒有「療程方式」資料，自然就只會套用文字排版，不會硬做圖表。
   ============================================================ */

/* ---------- 療程方式：步驟流程圖 ---------- */
.tdetail .mblk--steps ul{counter-reset:ebstep;}
.tdetail .mblk--steps li{
  position:relative;
  padding-left:56px;
  padding-bottom:clamp(18px,2vw,26px);
  margin-bottom:0;
}
.tdetail .mblk--steps li:last-child{padding-bottom:0;}

/* 編號圓圈（取代原本的小圓點） */
.tdetail .mblk--steps li::before{
  counter-increment:ebstep;
  content:counter(ebstep,decimal-leading-zero);
  position:absolute;
  left:0;top:.05em;
  width:34px;height:34px;
  border-radius:50%;
  border:1px solid var(--gold);
  background:var(--bg);
  color:var(--brand);
  font-family:var(--ff-en);
  font-size:13px;
  letter-spacing:.06em;
  line-height:1;
  display:flex;align-items:center;justify-content:center;
  z-index:1;
}
/* 串起各步驟的連接線 */
.tdetail .mblk--steps li::after{
  content:"";
  position:absolute;
  left:17px;
  top:calc(.05em + 34px);
  bottom:0;
  width:1px;
  background:var(--gold-lt);
}
.tdetail .mblk--steps li:last-child::after{display:none;}

/* 進場：編號由小放大，連接線由上往下畫 */
html.p-js .tdetail .mblk--steps li::before{transform:scale(.4);opacity:0;transition:transform .6s var(--ease),opacity .6s var(--ease);}
html.p-js .tdetail .mblk--steps li::after{transform:scaleY(0);transform-origin:top center;transition:transform .7s var(--ease);}
html.p-js .tdetail .mblk--steps[data-rv].in li::before{transform:none;opacity:1;}
html.p-js .tdetail .mblk--steps[data-rv].in li::after{transform:none;}
html.p-js .tdetail .mblk--steps[data-rv].in li:nth-child(1)::before{transition-delay:.10s}
html.p-js .tdetail .mblk--steps[data-rv].in li:nth-child(2)::before{transition-delay:.18s}
html.p-js .tdetail .mblk--steps[data-rv].in li:nth-child(3)::before{transition-delay:.26s}
html.p-js .tdetail .mblk--steps[data-rv].in li:nth-child(4)::before{transition-delay:.34s}
html.p-js .tdetail .mblk--steps[data-rv].in li:nth-child(5)::before{transition-delay:.42s}
html.p-js .tdetail .mblk--steps[data-rv].in li:nth-child(n+6)::before{transition-delay:.50s}

/* ---------- [ITEMTITLE-20261015] 清單項目小標題（「｜小標題｜內容」寫法） ---------- */
.mblk li .li-t{display:block;font-weight:600;color:var(--brand);letter-spacing:.04em;margin-bottom:.15em;}
.mblk li .li-d{display:block;}
.tdetail .mblk--steps li .li-t{font-size:1.02em;}

/* ---------- 適合對象：核取清單 ---------- */
.tdetail .mblk--check li{padding-left:28px;}
.tdetail .mblk--check li::before{
  content:"";
  position:absolute;
  left:3px;top:.72em;
  width:10px;height:5px;
  border:0;
  border-left:1px solid var(--brand);
  border-bottom:1px solid var(--brand);
  border-radius:0;
  background:none;
  transform:rotate(-45deg);
}
html.p-js .tdetail .mblk--check li::before{transform:rotate(-45deg) scale(0);transition:transform .5s var(--ease);}
html.p-js .tdetail .mblk--check[data-rv].in li::before{transform:rotate(-45deg);}

/* ---------- 療程優勢：編號網格 ---------- */
.tdetail .mblk--merit ul{counter-reset:ebmerit;}
.tdetail .mblk--merit li{padding-left:34px;}
.tdetail .mblk--merit li::before{
  counter-increment:ebmerit;
  content:counter(ebmerit,decimal-leading-zero);
  position:absolute;
  left:0;top:.5em;
  width:auto;height:auto;
  border-radius:0;
  background:none;
  color:var(--gold);
  font-family:var(--ff-en);
  font-size:12px;
  letter-spacing:.1em;
  line-height:1;
}
html.p-js .tdetail .mblk--merit li::before{transform:translateY(6px);opacity:0;transition:transform .55s var(--ease),opacity .55s var(--ease);}
html.p-js .tdetail .mblk--merit[data-rv].in li::before{transform:none;opacity:1;}

/* 兩欄清單在窄螢幕收成一欄，避免長句被擠成細條 */
@media (max-width:760px){
  .tdetail .mblk--grid ul{grid-template-columns:1fr;}
}

/* ---------- 簡介／為什麼選擇：文字排版 ---------- */
/* 第一段當引言，字級與顏色各上一階；沒有圖表的療程（如點滴類）靠這個撐起質感 */
.tdetail .mblk--prose > p:first-of-type{
  font-size:var(--fs-lg);
  line-height:var(--lh-loose);
  color:var(--ink);
}
/* 「為什麼選擇」整段放進一個淡底框，與前後的條列拉開層次 */
.tdetail .mblk--why{
  padding:clamp(22px,2.6vw,32px) clamp(24px,2.8vw,36px);
  background:var(--bg-2);
  border-top:1px solid var(--gold-lt);
}
.tdetail .mblk--why h4{margin-top:0;}
.tdetail .mblk--why > p:first-of-type{font-size:var(--fs-md);}

@media (prefers-reduced-motion:reduce){
  html.p-js .tdetail .mblk--steps li::before{transform:none;opacity:1;transition:none;}
  html.p-js .tdetail .mblk--steps li::after{transform:none;transition:none;}
  html.p-js .tdetail .mblk--check li::before{transform:rotate(-45deg);transition:none;}
  html.p-js .tdetail .mblk--merit li::before{transform:none;opacity:1;transition:none;}
}

/* ============================================================
   八、療程「自由內容」區塊（2026-09-24）
   固定版型之外的補充區，由客戶自行排版（可用標題、清單、表格、
   引言、分隔線，也能直接編輯原始碼）。這裡把常用標籤都預先定好樣式，
   客戶隨手排出來的東西也會落在全站的設計語彙裡。
   ============================================================ */
.tdetail .mblk--free{
  overflow-x:auto;              /* 表格較寬時可橫向捲動，不會撐破版面 */
  -webkit-overflow-scrolling:touch;
}

.tdetail .mblk--free h2,
.tdetail .mblk--free h3{
  font-family:var(--ff-tc);
  font-weight:500;
  color:var(--ink);
  letter-spacing:.1em;
  line-height:var(--lh-snug);
}
.tdetail .mblk--free h2{font-size:clamp(20px,2.2vw,26px);margin:1.6em 0 .7em;}
.tdetail .mblk--free h3{font-size:var(--fs-xl);margin:1.5em 0 .6em;}
.tdetail .mblk--free > *:first-child{margin-top:0;}

/* 有序清單：沿用編號網格的金色數字 */
.tdetail .mblk--free ol{margin:0 0 16px;padding-left:1.5em;list-style:decimal;}
.tdetail .mblk--free ol li{padding-left:0;}
.tdetail .mblk--free ol li::before{display:none;}
.tdetail .mblk--free ol li::marker{color:var(--gold);font-family:var(--ff-en);}

/* 表格：細線、無粗框，跟象牙白底搭 */
.tdetail .mblk--free table{
  width:100%;
  min-width:460px;
  border-collapse:collapse;
  margin:0 0 18px;
  font-size:var(--fs-base);
}
.tdetail .mblk--free th,
.tdetail .mblk--free td{
  padding:12px 14px;
  border-bottom:1px solid var(--line);
  text-align:left;
  vertical-align:top;
  line-height:var(--lh-body);
  letter-spacing:.04em;
}
.tdetail .mblk--free thead th{
  border-bottom:1px solid var(--gold);
  font-weight:500;
  color:var(--brand);
  letter-spacing:.14em;
  white-space:nowrap;
}
.tdetail .mblk--free tbody tr:last-child th,
.tdetail .mblk--free tbody tr:last-child td{border-bottom:0;}
.tdetail .mblk--free tbody th{font-weight:500;color:var(--ink);white-space:nowrap;}

/* 引言與分隔線 */
.tdetail .mblk--free blockquote{
  margin:1.4em 0;
  padding:16px 22px;
  background:var(--bg-2);
  border-left:2px solid var(--gold);
  color:var(--ink-2);
}
.tdetail .mblk--free blockquote p:last-child{margin-bottom:0;}
.tdetail .mblk--free hr{
  border:0;
  border-top:1px solid var(--line);
  margin:1.8em 0;
}

/* 圖片與影片 */
.tdetail .mblk--free img,
.tdetail .mblk--free video{
  border-radius:var(--r-sm);
  box-shadow:0 18px 44px -32px rgba(60,24,12,.45);
}

/* ---------- 療程方式：步驟附小插圖（2026-10-07）
   只要有一個步驟在後台選了插圖，區塊會多一個 .mblk--figs，改成「插圖＋編號＋文字」的卡片；
   沒有任何插圖的療程維持上面的步驟流程圖，完全不受影響。 ---------- */
.tdetail .mblk--figs li{
  display:grid;
  grid-template-columns:clamp(120px,24%,190px) 34px minmax(0,1fr);
  align-items:center;
  column-gap:clamp(14px,2vw,24px);
  padding:clamp(12px,1.4vw,16px);
  margin-bottom:clamp(10px,1.2vw,14px);
  background:rgba(255,255,255,.62);
  border:1px solid var(--line);
}
.tdetail .mblk--figs li:last-child{padding-bottom:clamp(12px,1.4vw,16px);margin-bottom:0;}
.tdetail .mblk--figs li::before{position:static;grid-column:2;grid-row:1;}
.tdetail .mblk--figs li::after{display:none;}
.tdetail .mblk--figs .mstep__fig{
  grid-column:1;grid-row:1;
  display:block;
  aspect-ratio:4/3;
  background:#fff;
  border:1px solid var(--line);
  overflow:hidden;
}
/* 圖片以絕對定位填滿插圖框：框的高度由 4:3 比例決定，圖片不會把框撐高或被裁切 */
.tdetail .mblk--figs .mstep__fig{position:relative;}
.tdetail .mblk--figs .mstep__fig img{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;margin:0;border-radius:0;object-fit:contain;}   /* margin:0 → 蓋掉內文圖片預設的上下間距 */
.tdetail .mblk--figs .mstep__txt{grid-column:3;grid-row:1;}
@media (max-width:640px){
  .tdetail .mblk--figs li{grid-template-columns:104px minmax(0,1fr);row-gap:8px;align-items:start;}
  .tdetail .mblk--figs .mstep__fig{grid-row:1 / span 2;}
  .tdetail .mblk--figs li::before{grid-column:2;grid-row:1;width:28px;height:28px;font-size:12px;}
  .tdetail .mblk--figs .mstep__txt{grid-column:2;grid-row:2;}
}