.media_board {
    padding:50px 0 150px;
}

.media_title {
    margin-bottom:65px;
    text-align:center;
}

.media_title h2 {
    margin:0;
    color:#222;
    font-size:48px;
    font-weight:700;
}


/* FEATURE */

.media_feature_wrap {
    padding:80px 0;
    background:#F8F8F7;
}

.media_feature {
    position:relative;
    min-height:390px;
}

.media_feature_slide {
    position:absolute;
    inset:0;
    display:grid;
    grid-template-columns:1.15fr .85fr;
    gap:60px;
    align-items:center;
    color:#222;
    text-decoration:none;
    opacity:0;
    visibility:hidden;
    transition:.45s ease;
}

.media_feature_slide.active {
    opacity:1;
    visibility:visible;
}

.media_feature_img {
    overflow:hidden;
    border-radius:20px;
    aspect-ratio:1.65/1;
}

.media_feature_img img {
    width:100%;
    height:100%;
    object-fit:cover;
}

.media_feature_text{padding-bottom: 60px}

.media_feature_text strong {
    display:-webkit-box;
    overflow:hidden;
    font-size:30px;
    line-height:1.45;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
}

.media_feature_text p {
    display:-webkit-box;
    overflow:hidden;
    margin:25px 0;
    color:#777;
    font-size:18px;
    line-height:1.65;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
}

.media_feature_text > span {
    color:#777;
    font-size:18px;
}

.media_feature_nav {
    position:absolute;
    left:calc(57.5% + 30px);
    bottom:15px;
    z-index:20;
    display:flex;
    align-items:center;
    gap:12px;
    font-size: 18px;
}

.media_feature_nav button {
    width:50px;
    height:50px;
    border:1px solid #ddd;
    border-radius:50%;
    background:#fff;
    cursor:pointer;
        display: flex;
    justify-content: center;
    align-items: center;
}

.media_feature_nav button svg{display: block}

.media_list_area {
    padding-top:80px;
}

.media_grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:45px 25px;
}

.media_item {
    color:#222;
    text-decoration:none;
}

.media_thumb {
    overflow:hidden;
    border-radius:18px;
    aspect-ratio:1.45/1;
}

.media_thumb img {
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .6s cubic-bezier(.22,1,.36,1);
}

.media_item:hover .media_thumb img {
    transform:scale(1.04);
}

.media_item > strong {
    display:-webkit-box;
    overflow:hidden;
    margin-top:20px;
    font-size:24px;
    line-height:1.45;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
}

.media_item > span {
    display:block;
    margin-top:18px;
    color:#777;
    font-size:18px;
}

@media(max-width:819px) {

    .media_feature {
        min-height:580px;
    }

    .media_feature_slide {
        grid-template-columns:1fr;
        gap:30px;
        align-content:start;
    }

    .media_feature_nav {
        left:0;
        bottom:0;
    }

    .media_grid {
        grid-template-columns:repeat(2,1fr);
    }

}

@media(max-width:580px) {

    .media_title h2 {
        font-size:30px;
    }

    .media_grid {
        grid-template-columns:1fr;
    }

}
/* ========================================================================
   FINAL MOBILE POLISH — 2026-09-07
======================================================================== */
@media(max-width:1024px){
    .media_board{padding:40px 0 110px;}
    .media_title{margin-bottom:48px;}
    .media_title h2{font-size:38px;}
    .media_feature_wrap{padding:60px 0;}
    .media_feature_slide{gap:38px;}
    .media_feature_text strong{font-size:26px;}
    .media_feature_text p,.media_feature_text>span{font-size:16px;}
    .media_item>strong{font-size:21px;}
    .media_item>span{font-size:16px;}
}

@media(max-width:819px){
    .media_board{padding:30px 0 85px;}
    .media_title{margin-bottom:34px;}
    .media_title h2{font-size:28px;line-height:1.4;}
    .media_feature_wrap{padding:46px 0;}
    .media_feature{min-height:500px;}
    .media_feature_slide{gap:22px;}
    .media_feature_img{border-radius:14px;}
    .media_feature_text{padding-bottom:54px;}
    .media_feature_text strong{font-size:22px;line-height:1.45;letter-spacing:-.025em;}
    .media_feature_text p{margin:14px 0;font-size:14px;line-height:1.65;}
    .media_feature_text>span{font-size:14px;}
    .media_feature_nav{gap:8px;font-size:14px;}
    .media_feature_nav button{width:42px;height:42px;}
    .media_list_area{padding-top:52px;}
    .media_grid{gap:30px 16px;}
    .media_thumb{border-radius:13px;}
    .media_item>strong{margin-top:14px;font-size:18px;line-height:1.5;}
    .media_item>span{margin-top:10px;font-size:14px;}
}

@media(max-width:620px){
    .media_board{padding:24px 0 68px;}
    .media_title{margin-bottom:28px;}
    .media_title h2{font-size:24px;}
    .media_feature_wrap{padding:36px 0;}
    .media_feature{min-height:465px;}
    .media_feature_slide{gap:18px;}
    .media_feature_img{border-radius:12px;}
    .media_feature_text{padding-bottom:50px;}
    .media_feature_text strong{font-size:20px;line-height:1.48;}
    .media_feature_text p{margin:12px 0;font-size:13px;line-height:1.6;}
    .media_feature_text>span{font-size:13px;}
    .media_feature_nav{font-size:13px;}
    .media_feature_nav button{width:40px;height:40px;}
    .media_list_area{padding-top:42px;}
    .media_grid{grid-template-columns:1fr;gap:28px;}
    .media_item>strong{margin-top:12px;font-size:17px;}
    .media_item>span{margin-top:8px;font-size:13px;}
}

@media(max-width:430px){
    .media_feature{min-height:445px;}
    .media_feature_text strong{font-size:19px;}
    .media_item>strong{font-size:16px;}
}

/* ========================================================================
   FINAL MOBILE RHYTHM / GUTTER AUDIT — 2026-09-07 v3
   - Prevent feature image/text from touching viewport edges
   - Let the feature slider size itself from content instead of fixed heights
   - Normalize vertical gaps between image, title, excerpt, date and controls
======================================================================== */
@media (max-width:819px){
    .media_feature_wrap{
        padding:38px 0 44px;
    }
    .media_feature_wrap .wgd_board_inner,
    .media_list_area.wgd_board_inner{
        padding-left:22px !important;
        padding-right:22px !important;
    }
    .media_feature{
        display:grid;
        min-height:0 !important;
    }
    .media_feature_slide{
        position:relative !important;
        inset:auto !important;
        grid-area:1 / 1;
        grid-template-columns:1fr !important;
        gap:24px !important;
        align-content:start !important;
        padding-bottom:62px;
        box-sizing:border-box;
    }
    .media_feature_img{
        width:100%;
        border-radius:14px;
    }
    .media_feature_text{
        min-width:0;
        padding:0 !important;
    }
    .media_feature_text strong{
        margin:0;
        font-size:19px;
        line-height:1.48;
        letter-spacing:-.025em;
        word-break:keep-all;
        overflow-wrap:anywhere;
    }
    .media_feature_text p{
        margin:14px 0 0;
        font-size:13px;
        line-height:1.7;
        word-break:keep-all;
    }
    .media_feature_text > span{
        margin-top:16px;
        display:block;
        font-size:13px;
        line-height:1.4;
    }
    .media_feature_nav{
        left:0 !important;
        bottom:0 !important;
        gap:8px;
    }
    .media_list_area{
        padding-top:48px;
    }
}

@media (max-width:620px){
    .media_board{
        padding-top:26px;
        padding-bottom:64px;
    }
    .media_title{
        margin-bottom:26px;
    }
    .media_title h2{
        font-size:22px;
        line-height:1.4;
        letter-spacing:-.025em;
    }
    .media_feature_wrap{
        padding:30px 0 34px;
    }
    .media_feature_wrap .wgd_board_inner,
    .media_list_area.wgd_board_inner{
        padding-left:18px !important;
        padding-right:18px !important;
    }
    .media_feature_slide{
        gap:20px !important;
        padding-bottom:58px;
    }
    .media_feature_img{
        border-radius:12px;
    }
    .media_feature_text strong{
        font-size:17px;
        line-height:1.5;
    }
    .media_feature_text p{
        margin-top:12px;
        font-size:12px;
        line-height:1.7;
        -webkit-line-clamp:3;
    }
    .media_feature_text > span{
        margin-top:14px;
        font-size:12px;
    }
    .media_feature_nav button{
        width:38px;
        height:38px;
    }
    .media_feature_nav{
        font-size:12px;
    }
    .media_list_area{
        padding-top:38px;
    }
    .media_grid{
        gap:26px;
    }
    .media_item > strong{
        margin-top:12px;
        font-size:16px;
        line-height:1.5;
    }
    .media_item > span{
        margin-top:8px;
        font-size:12px;
    }
}

@media (max-width:430px){
    .media_feature_wrap .wgd_board_inner,
    .media_list_area.wgd_board_inner{
        padding-left:16px !important;
        padding-right:16px !important;
    }
    .media_title h2{font-size:21px;}
    .media_feature_text strong{font-size:16px;}
    .media_feature_slide{gap:18px !important;}
}