/* =============================================================================
   blog.css — เลย์เอาต์หน้าบทความและหน้า Landing

   เดิม CSS ของหน้าบทความฝังเป็น <style> ซ้ำกันในทุกไฟล์ (แก้ที่เดียวไม่พอ)
   และใช้โทนเขียว #3B6D11 ซึ่งไม่ใช่สีแบรนด์ ไฟล์นี้ย้ายมาไว้ที่เดียว
   และปรับให้ใช้ตัวแปรสีเดียวกับทั้งเว็บ (navy #0C416D / orange #FF8400)

   โครงหน้า
     .post-hero      รูปใหญ่ + การ์ดหัวข้อซ้อนทับมุมล่างซ้าย
     .post-byline    แถวผู้เขียน + วันที่ + ปุ่มแชร์
     .post-body      เนื้อหาคอลัมน์เดียว ความกว้างพออ่านสบาย
     .post-tags      แท็กทรงแคปซูล
     .post-more      การ์ดบทความเกี่ยวข้อง 3 คอลัมน์
     .post-cta       แถบชวนติดต่อท้ายหน้า
   ============================================================================= */

.brand-title{
    position:absolute !important;
    width:1px !important; height:1px !important;
    padding:0 !important; margin:-1px !important;
    overflow:hidden !important;
    clip:rect(0,0,0,0) !important;
    white-space:nowrap !important;
    border:0 !important;
}

/* ---------------------------------------------------------------- ตัวห่อหน้า */
.post-wrap{
    --post-measure:748px;
    /* ระยะเยื้องซ้ายของคอลัมน์เนื้อหา ให้ตรงกับขอบข้อความในการ์ดหัวข้อ
       (การ์ดเยื้อง 38px + padding 34px) เนื้อหาจึงเรียงเป็นแกนเดียวกับหัวข้อ
       ไม่ใช่จัดกลางแล้วดูหลุดจากกันเหมือนตอนแรก */
    --post-indent:72px;
    max-width:1140px;
    margin:0 auto;
    padding:26px 20px 0;
}

/* -------------------------------------------------------------- Breadcrumb */
.post-crumb{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:8px;
    margin-bottom:18px;
    font-size:15px;
    color:#7a8794;
}
.post-crumb a{color:var(--color-primary);text-decoration:none;font-weight:var(--fw-medium)}
.post-crumb a:hover{color:var(--color-secondary);text-decoration:none}
.post-crumb span.sep{color:#c3ccd4}

/* ------------------------------------------------------------------- Hero */
.post-hero{
    position:relative;
    margin-bottom:96px;   /* เผื่อที่ให้การ์ดหัวข้อที่ยื่นออกมา */
}
.post-hero-media{
    position:relative;
    overflow:hidden;
    border-radius:22px;
    background:#E8EDF2;
    aspect-ratio:16/7;
}
.post-hero-media img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}
/* ไล่เฉดมืดด้านล่าง ให้การ์ดขาวลอยเด่นขึ้น */
.post-hero-media::after{
    content:"";
    position:absolute;
    inset:auto 0 0 0;
    height:45%;
    background:linear-gradient(to top,rgba(6,32,54,.42),transparent);
    pointer-events:none;
}

.post-titlecard{
    position:absolute;
    left:38px;
    right:38px;
    bottom:-72px;
    max-width:760px;
    padding:30px 34px 32px;
    background:#fff;
    border-radius:18px;
    box-shadow:0 18px 44px rgba(12,65,109,.16);
}
.post-cat{
    margin:0 0 12px;
    font-size:16px;
    font-weight:var(--fw-semiBold);
    color:#8a95a1;
    letter-spacing:.02em;
}
.post-cat span{color:var(--color-secondary);font-weight:var(--fw-bold)}
.post-titlecard h1{
    margin:0;
    font-size:clamp(24px,3.1vw,38px);
    font-weight:var(--fw-bold);
    line-height:1.34;
    color:#14293c;
    letter-spacing:-.01em;
}

/* ----------------------------------------------------------------- Byline */
.post-byline{
    display:flex;
    align-items:center;
    gap:16px;
    max-width:var(--post-measure);
    margin:0 0 34px var(--post-indent);
}
.post-avatar{
    flex:0 0 56px;
    width:56px; height:56px;
    border-radius:50%;
    object-fit:cover;
    background:#fff;
    border:1px solid #E2E8EE;
    padding:4px;
}
.post-author{flex:1 1 auto;min-width:0}
.post-author strong{
    display:block;
    font-size:19px;
    font-weight:var(--fw-bold);
    color:#14293c;
    line-height:1.4;
}
.post-author span{
    display:block;
    margin-top:3px;
    font-size:15px;
    color:#8a95a1;
}

/* ปุ่มแชร์ + แผงแชร์ */
.post-share-holder{position:relative;flex:0 0 auto}
.post-share{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:10px 20px;
    border:1.5px solid var(--color-secondary);
    border-radius:999px;
    background:#fff;
    color:var(--color-secondary);
    font-family:inherit;
    font-size:16px;
    font-weight:var(--fw-bold);
    cursor:pointer;
    transition:background .2s ease,color .2s ease,transform .2s ease;
}
.post-share:hover{background:var(--color-secondary);color:#fff;transform:translateY(-1px)}
.post-share svg{width:17px;height:17px;fill:currentColor}

.post-sharebox{
    position:absolute;
    right:0;
    top:calc(100% + 12px);
    z-index:30;
    width:296px;
    padding:20px;
    background:#fff;
    border:1px solid #E2E8EE;
    border-radius:16px;
    box-shadow:0 18px 40px rgba(12,65,109,.18);
    opacity:0;
    visibility:hidden;
    transform:translateY(-8px);
    transition:opacity .2s ease,transform .2s ease,visibility .2s;
}
.post-sharebox.is-open{opacity:1;visibility:visible;transform:translateY(0)}
.post-sharebox h4{
    margin:0 0 14px;
    font-size:17px;
    font-weight:var(--fw-bold);
    color:#14293c;
}
.post-sharebox-close{
    position:absolute;
    top:12px; right:12px;
    width:26px; height:26px;
    border:0;
    border-radius:50%;
    background:#F1F4F7;
    color:#6b7885;
    font-size:16px;
    line-height:1;
    cursor:pointer;
}
.post-sharebox-close:hover{background:#E2E8EE}
.post-share-icons{display:flex;gap:10px;margin-bottom:18px}
.post-share-icons a{
    width:42px; height:42px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#F1F4F7;
    color:var(--color-primary);
    transition:background .2s ease,color .2s ease,transform .2s ease;
}
.post-share-icons a:hover{background:var(--color-primary);color:#fff;transform:translateY(-2px)}
.post-share-icons svg{width:19px;height:19px;fill:currentColor}
.post-sharebox label{
    display:block;
    margin-bottom:7px;
    font-size:14px;
    font-weight:var(--fw-semiBold);
    color:#6b7885;
}
.post-copyrow{display:flex;gap:8px}
.post-copyrow input{
    flex:1 1 auto;
    min-width:0;
    padding:9px 12px;
    border:1px solid #E2E8EE;
    border-radius:9px;
    background:#F7FAFC;
    font-family:inherit;
    font-size:14px;
    color:#6b7885;
}
.post-copybtn{
    flex:0 0 auto;
    padding:9px 16px;
    border:0;
    border-radius:9px;
    background:var(--color-secondary);
    color:#fff;
    font-family:inherit;
    font-size:14px;
    font-weight:var(--fw-bold);
    cursor:pointer;
}
.post-copybtn:hover{background:var(--color-secondary-lighter)}

/* ------------------------------------------------------------------- Body */
.post-body{
    max-width:var(--post-measure);
    margin:0 0 0 var(--post-indent);
}
.post-body > p{
    margin:0 0 22px;
    font-size:18px;
    line-height:1.95;
    color:#48545f;
}
.post-body > p:first-of-type{
    font-size:20px;
    line-height:1.9;
    color:#3a4653;
}
.post-body strong{color:#14293c;font-weight:var(--fw-bold)}
.post-body a{
    color:var(--color-primary);
    font-weight:var(--fw-semiBold);
    text-decoration:underline;
    text-decoration-color:rgba(12,65,109,.3);
    text-underline-offset:3px;
}
.post-body a:hover{color:var(--color-secondary);text-decoration-color:currentColor}

.post-body h2{
    margin:52px 0 18px;
    font-size:clamp(22px,2.3vw,29px);
    font-weight:var(--fw-bold);
    line-height:1.42;
    color:#14293c;
    letter-spacing:-.01em;
}
.post-body h3{
    margin:34px 0 12px;
    font-size:21px;
    font-weight:var(--fw-bold);
    line-height:1.5;
    color:var(--color-primary);
}

.post-body ul,
.post-body ol{margin:0 0 22px;padding-left:26px}
.post-body li{
    margin-bottom:10px;
    font-size:18px;
    line-height:1.9;
    color:#48545f;
}
.post-body li::marker{color:var(--color-secondary)}

/* คำพูดเน้น */
.post-body blockquote,
.post-quote{
    position:relative;
    margin:38px 0;
    padding:8px 0 8px 62px;
    border:0;
    font-size:clamp(20px,2.1vw,26px);
    font-style:italic;
    font-weight:var(--fw-medium);
    line-height:1.62;
    color:#14293c;
}
.post-body blockquote::before,
.post-quote::before{
    content:"\201C";
    position:absolute;
    left:0;
    top:-14px;
    font-size:82px;
    line-height:1;
    color:var(--color-secondary);
    opacity:.35;
    font-style:normal;
}
.post-quote cite{
    display:block;
    margin-top:14px;
    font-size:16px;
    font-style:normal;
    font-weight:var(--fw-semiBold);
    color:#8a95a1;
}

/* กล่องเน้นข้อความ */
.blog-highlight{
    margin:30px 0;
    padding:22px 24px;
    background:#FFF6EB;
    border:1px solid #FFE0BE;
    border-left:4px solid var(--color-secondary);
    border-radius:0 14px 14px 0;
    font-size:17px;
    line-height:1.85;
    color:#6b4a1e;
}
.blog-highlight strong{color:#4a3210}

/* ตาราง */
.blog-table-wrap{
    margin:30px 0;
    overflow-x:auto;
    border:1px solid #E2E8EE;
    border-radius:14px;
}
.blog-table-wrap table{
    width:100%;
    min-width:460px;
    border-collapse:collapse;
    font-size:16px;
}
.blog-table-wrap th{
    padding:14px 18px;
    background:var(--color-primary);
    color:#fff;
    font-weight:var(--fw-bold);
    text-align:left;
    white-space:nowrap;
}
.blog-table-wrap td{
    padding:13px 18px;
    border-bottom:1px solid #EDF1F5;
    color:#48545f;
    line-height:1.75;
}
.blog-table-wrap tr:last-child td{border-bottom:0}
.blog-table-wrap tbody tr:nth-child(even) td,
.blog-table-wrap tr:nth-child(even) td{background:#F9FBFC}

/* กริดรูปในบทความ (2 คอลัมน์แบบดีไซน์อ้างอิง) */
.post-figs{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:14px;
    margin:30px 0;
}
.post-figs img{
    width:100%;
    aspect-ratio:4/3;
    object-fit:cover;
    border-radius:14px;
    display:block;
}

/* ขั้นตอน */
.blog-steps{margin:26px 0 32px}
.blog-step{
    display:flex;
    align-items:flex-start;
    gap:16px;
    padding:18px 20px;
    margin-bottom:12px;
    background:#F7FAFC;
    border:1px solid #E2E8EE;
    border-radius:14px;
    font-size:17px;
    line-height:1.85;
    color:#48545f;
}
.blog-step strong{color:var(--color-primary)}
.blog-step-no{
    flex:0 0 34px;
    width:34px; height:34px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:var(--color-secondary);
    color:#fff;
    font-weight:var(--fw-bold);
    font-size:17px;
    line-height:1;
}

/* FAQ ในบทความใช้ component เดียวกับหน้าแรก (.faq-item ใน modify.css)
   จึงไม่ต้องนิยามซ้ำที่นี่ และไม่ต้อง animate max-height/padding อีก */

/* ------------------------------------------------------------------- Tags */
.post-tags{
    display:flex;
    flex-wrap:wrap;
    gap:9px;
    max-width:var(--post-measure);
    margin:44px 0 0 var(--post-indent);
    padding:26px 0 0;
    border-top:1px solid #EDF1F5;
    list-style:none;
}
.post-tags li a{
    display:inline-block;
    padding:8px 17px;
    background:#F1F4F7;
    border-radius:999px;
    font-size:15px;
    font-weight:var(--fw-medium);
    color:#5b6874;
    text-decoration:none;
    transition:background .2s ease,color .2s ease;
}
.post-tags li a:hover{background:var(--color-primary);color:#fff;text-decoration:none}

/* -------------------------------------------------- บทความเกี่ยวข้อง (การ์ด) */
.post-more{
    max-width:1140px;
    margin:70px auto 0;
    padding:0 20px;
}
.post-more-head{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:16px;
    margin-bottom:24px;
}
.post-more-head h2{
    margin:0;
    font-size:clamp(22px,2.4vw,30px);
    font-weight:var(--fw-bold);
    color:#14293c;
}
.post-more-head a{
    flex:0 0 auto;
    font-size:16px;
    font-weight:var(--fw-bold);
    color:var(--color-secondary);
    text-decoration:none;
}
.post-more-head a:hover{text-decoration:underline}

.post-cards{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:22px;
}
.post-card{
    display:flex;
    flex-direction:column;
    background:#fff;
    border:1px solid #E2E8EE;
    border-radius:16px;
    overflow:hidden;
    text-decoration:none;
    transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}
.post-card:hover{
    transform:translateY(-5px);
    border-color:var(--color-secondary-lighter);
    box-shadow:0 16px 34px rgba(12,65,109,.14);
    text-decoration:none;
}
.post-card-media{
    aspect-ratio:16/10;
    overflow:hidden;
    background:#E8EDF2;
}
.post-card-media img{
    width:100%; height:100%;
    object-fit:cover;
    display:block;
    transition:transform .4s ease;
}
.post-card:hover .post-card-media img{transform:scale(1.05)}
.post-card-in{
    display:flex;
    flex-direction:column;
    flex:1 1 auto;
    padding:20px 20px 22px;
}
.post-card-in h3{
    margin:0 0 9px;
    font-size:18px;
    font-weight:var(--fw-bold);
    line-height:1.55;
    color:#14293c;
}
.post-card-in p{
    margin:0 0 16px;
    font-size:15px;
    line-height:1.8;
    color:#6b7885;
}
.post-card-more{
    margin-top:auto;
    font-size:15px;
    font-weight:var(--fw-bold);
    color:var(--color-secondary);
}

/* --------------------------------------------------------------- CTA ท้ายหน้า */
.post-cta{
    margin:76px 0 0;
    padding:56px 20px 60px;
    background:linear-gradient(135deg,var(--color-primary) 0%,#12598f 55%,#17709b 100%);
    text-align:center;
    color:#fff;
}
/* container ของทุกส่วนในหน้า detail คุมไว้ที่ 1140 ให้เป็นแกนเดียวกันทั้งหน้า
   (พื้นหลังของแถบยังเต็มความกว้างจอตามดีไซน์ แต่เนื้อหาอยู่ใน 1140) */
.post-cta-in{max-width:1140px;margin:0 auto}
.post-cta-in > p{max-width:760px;margin-left:auto;margin-right:auto}
.post-cta h2{
    margin:0 0 12px;
    font-size:clamp(23px,2.6vw,32px);
    font-weight:var(--fw-bold);
    line-height:1.45;
    color:#fff;
}
.post-cta p{
    margin:0 0 26px;
    font-size:17px;
    line-height:1.85;
    color:rgba(255,255,255,.88);
}
.post-cta-btns{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    justify-content:center;
}
.post-cta-btn{
    display:inline-flex;
    align-items:center;
    gap:9px;
    padding:15px 30px;
    border-radius:999px;
    font-size:17px;
    font-weight:var(--fw-bold);
    text-decoration:none;
    transition:transform .2s ease,box-shadow .2s ease,background .2s ease;
}
.post-cta-btn:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(0,0,0,.24);text-decoration:none}
.post-cta-primary{background:var(--color-secondary);color:#fff}
.post-cta-primary:hover{background:var(--color-secondary-lighter);color:#fff}
.post-cta-ghost{background:#fff;color:var(--color-primary)}
.post-cta-ghost:hover{background:#EAF3DE;color:var(--color-primary)}

/* กล่อง CTA กลางบทความ */
.blog-cta-box{
    margin:38px 0;
    padding:28px 26px;
    border-radius:18px;
    background:linear-gradient(135deg,var(--color-primary),#12598f);
    color:#fff;
    text-align:center;
}
.blog-cta-box h3{margin:0 0 10px;font-size:21px;font-weight:var(--fw-bold);color:#fff;line-height:1.5}
.blog-cta-box p{margin:0 0 20px;font-size:16px;line-height:1.8;color:rgba(255,255,255,.9)}
.blog-cta-btns{display:flex;flex-wrap:wrap;gap:11px;justify-content:center}
.blog-cta-btn{
    display:inline-block;
    padding:13px 24px;
    border-radius:999px;
    font-size:16px;
    font-weight:var(--fw-bold);
    text-decoration:none;
    transition:transform .2s ease,box-shadow .2s ease,background .2s ease;
}
.blog-cta-btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,.22);text-decoration:none}
.blog-cta-primary{background:var(--color-secondary);color:#fff}
.blog-cta-primary:hover{background:var(--color-secondary-lighter);color:#fff}
.blog-cta-line{background:#fff;color:var(--color-primary)}
.blog-cta-line:hover{background:#EAF3DE;color:var(--color-primary)}

/* แผนที่ฝัง */
.blog-map-wrap{
    position:relative;
    margin:26px 0 32px;
    padding-top:52%;
    border:1px solid #E2E8EE;
    border-radius:16px;
    overflow:hidden;
    background:#F1F4F7;
}
.blog-map-wrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* =============================================================== หน้ารายการ */
.list-hero{
    max-width:1140px;
    margin:0 auto;
    padding:40px 20px 8px;
    text-align:center;
}
.list-hero h1{
    margin:0 0 12px;
    font-size:clamp(26px,3.4vw,40px);
    font-weight:var(--fw-bold);
    line-height:1.35;
    color:#14293c;
}
.list-hero p{
    max-width:620px;
    margin:0 auto;
    font-size:18px;
    line-height:1.85;
    color:#6b7885;
}
.list-grid{
    max-width:1140px;
    margin:0 auto;
    padding:34px 20px 0;
}

/* การ์ดบทความแนะนำ: รูปครึ่งซ้าย เนื้อหาครึ่งขวา */
.list-feature{
    display:grid;
    grid-template-columns:1.05fr 1fr;
    margin-bottom:44px;
    background:#fff;
    border:1px solid #E2E8EE;
    border-radius:20px;
    overflow:hidden;
    text-decoration:none;
    transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}
.list-feature:hover{
    transform:translateY(-5px);
    border-color:var(--color-secondary-lighter);
    box-shadow:0 20px 42px rgba(12,65,109,.16);
    text-decoration:none;
}
.list-feature-media{overflow:hidden;background:#E8EDF2;min-height:280px}
.list-feature-media img{
    width:100%; height:100%;
    object-fit:cover;
    display:block;
    transition:transform .45s ease;
}
.list-feature:hover .list-feature-media img{transform:scale(1.04)}
.list-feature-in{
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:36px 34px;
}
.list-badge{
    align-self:flex-start;
    margin-bottom:14px;
    padding:6px 16px;
    border-radius:999px;
    background:var(--color-secondary);
    color:#fff;
    font-size:14px;
    font-weight:var(--fw-bold);
}
.list-feature-in h2{
    margin:0 0 12px;
    font-size:clamp(21px,2.2vw,27px);
    font-weight:var(--fw-bold);
    line-height:1.45;
    color:#14293c;
}
.list-feature-in p{
    margin:0 0 18px;
    font-size:17px;
    line-height:1.85;
    color:#6b7885;
}

/* ป้ายหมวดในการ์ด (เล็กกว่าในการ์ดหัวข้อของหน้าบทความ) */
.post-card-in .post-cat{
    margin:0 0 8px;
    font-size:14px;
}

/* แท็กที่ไม่มีหน้าปลายทาง แสดงเป็นชิปเฉย ๆ ไม่ทำลิงก์เสีย */
.post-tags li span{
    display:inline-block;
    padding:8px 17px;
    background:#F1F4F7;
    border-radius:999px;
    font-size:15px;
    font-weight:var(--fw-medium);
    color:#5b6874;
}

/* ============================================================== Responsive */
@media (max-width:991px){
    .post-wrap{--post-indent:22px}
    .post-hero{margin-bottom:78px}
    .post-titlecard{left:22px;right:22px;bottom:-58px;padding:24px 24px 26px}
    .post-cards{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:767px){
    .post-wrap{padding:18px 16px 0;--post-indent:0px}
    .post-hero{margin-bottom:22px}
    .post-hero-media{border-radius:16px;aspect-ratio:4/3}
    /* มือถือ: ย้ายการ์ดหัวข้อมาไว้ใต้รูป จะไม่บังภาพและอ่านง่ายกว่า
       ต้องเป็น position:relative + z-index เพราะ .post-hero-media เป็น
       position:relative อยู่ ถ้าการ์ดเป็น static รูปจะวาดทับข้อความบรรทัดแรก */
    .post-titlecard{
        position:relative;
        z-index:2;
        left:auto; right:auto; bottom:auto;
        max-width:none;
        margin-top:-34px;
        padding:22px 20px;
        border-radius:16px;
    }
    .post-hero-media::after{display:none}

    .post-byline{gap:12px;margin-bottom:26px;flex-wrap:wrap}
    .post-avatar{flex-basis:46px;width:46px;height:46px}
    .post-author strong{font-size:17px}
    .post-author span{font-size:14px}
    .post-share{padding:9px 16px;font-size:15px}
    .post-sharebox{
        position:fixed;
        left:16px; right:16px;
        top:auto; bottom:16px;
        width:auto;
    }

    .post-body > p,
    .post-body li{font-size:17px;line-height:1.9}
    .post-body > p:first-of-type{font-size:18px}
    .post-body h2{margin:40px 0 14px}
    .post-body h3{font-size:19px}
    .post-body blockquote,
    .post-quote{padding-left:0;padding-top:44px}
    .post-body blockquote::before,
    .post-quote::before{font-size:64px;top:-6px}

    .blog-highlight{padding:18px 18px;font-size:16px}
    .blog-table-wrap table{font-size:15px}
    .blog-table-wrap th,
    .blog-table-wrap td{padding:11px 14px}
    .blog-step{font-size:16px;padding:15px 16px;gap:12px}
    .blog-step-no{flex-basis:30px;width:30px;height:30px;font-size:15px}

    .post-figs{gap:10px}
    .post-more{margin-top:52px;padding:0 16px}
    .post-cards{grid-template-columns:1fr;gap:16px}
    .post-cta{margin-top:56px;padding:44px 18px 48px}
    .post-cta-btn{width:100%;justify-content:center;padding:15px 22px}
    .blog-cta-box{padding:24px 18px;border-radius:16px}
    .blog-cta-btn{width:100%}
    .blog-map-wrap{padding-top:72%}
    .list-hero{padding:28px 16px 4px}
    .list-grid{padding:24px 16px 0}
    .list-feature{grid-template-columns:1fr;margin-bottom:32px;border-radius:16px}
    .list-feature-media{min-height:0;aspect-ratio:16/9}
    .list-feature-in{padding:22px 20px 24px}
    .list-feature-in p{font-size:16px}
}

@media (min-width:768px) and (max-width:991px){
    .list-feature{grid-template-columns:1fr}
    .list-feature-media{min-height:0;aspect-ratio:16/7}
}