:root {
            --bg-color: #f5f5f7;
            --card-bg: #ffffff;
            --text-main: #0d0d0d;
            --text-muted: #6b6c72;
            --pill-bg: #f0f0f3;
            --pill-text: #323338;
            --card-radius: 28px;
            --card-radius-sm: 15px;
            --pill-radius: 100px;
            --shadow-subtle: 0 12px 32px rgba(0, 0, 0, 0.05);
            --shadow-hover: 0 22px 48px rgba(0, 0, 0, 0.1);
        }

        /* * {
            box-sizing: border-box;
        } */

        /* body {
            background-color: #f8f9fa;
        } */

        /* Container constraints */
        .dashboard-container {
            /* max-width: 1100px;
            margin: 0 auto; */
            /* padding: 20px 20px 50px 20px; */
            padding: 0px;
        }

        /* Header typography matching design */
        .main-title {
            /* font-size: clamp(1.75rem, 5vw, 3.25rem); */
            font-size: 28px;
            font-weight: 800;
            letter-spacing: -0.035em;
            line-height: 1.12;
            color: var(--text-main);
        }

        .main-title em {
            /* font-family: 'Playfair Display', serif; */
            /* font-style: italic; */
            font-weight: 800;
        }

        /* Shared Card Base */
        .article-card {
            background-color: var(--primary-color);
            /* border-radius: 15px; */
            box-shadow: var(--shadow-subtle);
            border: 1px solid rgba(255, 255, 255, 0.8);
            transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), 
                        box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1);
            cursor: pointer;
            overflow: hidden;
            position: relative;
        }

        .article-card:hover {
            transform: translateY(-4px);
            box-shadow: var(--shadow-hover);
        }

        /* Category Tag Pill */
        .tag-pill {
            background-color: rgba(238, 238, 242, 0.85);
            backdrop-filter: blur(6px);
            -webkit-backdrop-filter: blur(6px);
            color: var(--pill-text);
            font-size: clamp(0.6rem, 1.2vw, 0.75rem);
            font-weight: 700;
            padding: 4px 12px;
            border-radius: var(--pill-radius);
            letter-spacing: -0.01em;
            display: inline-block;
        }

        .brand-signature {
            font-family: 'Playfair Display', serif;
            font-style: italic;
            font-weight: 600;
            font-size: clamp(0.75rem, 1.5vw, 1rem);
            color: var(--text-main);
        }

        /* Top Featured Horizontal Card */
        .featured-card {
            display: flex;
            flex-direction: row;
            min-height: 320px;
            width: 100%;
        }

        /* .featured-cards .featured-img-cols {
            flex: 0 0 48%;
            max-width: 48%;
            position: relative;
            background: #e8e8ec;
            overflow: hidden;
        }

        .featured-cards .featured-img-cols img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            filter: contrast(1.03) brightness(0.98);
            transition: transform 0.6s ease;
        }

        .featured-cards:hover .featured-img-cols img {
            transform: scale(1.04);
        } */

        .featured-card {
            display: flex;
            flex-direction: row;
            width: 100%;
            border: #ebebef 1px solid;
            min-height: 320px;
            position: relative;
            overflow: hidden;
        }

        /* Kedua gambar full horizontal */
        .featured-card .featured-img-col {
            flex: 0 0 50%;
            max-width: 50%;
            width: 50%;
            position: relative;
            overflow: hidden;
        }

        /* Garis diagonal antara gambar */
        .featured-card .featured-img-col:first-child {
            clip-path: polygon(
                0 0,
                100% 0,
                94% 90%,
                100% 100%,
                0 100%
            );
            z-index: 2;
        }

        .featured-card .featured-img-col:nth-child(2) {
            margin-left: -3%;
            width: 53%;
            max-width: 53%;
            flex: 0 0 53%;
            z-index: 1;
        }

        /* Gambar tetap memenuhi area */
        .featured-card .featured-img-col img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            filter: contrast(1.03) brightness(0.98);
            transition: transform 0.6s ease;
        }

        /* Hover tetap sama */
        .featured-card:hover .featured-img-col img {
            transform: scale(1.04);
        }

        /* Text di atas gambar */
        .featured-card .featured-img-col h2 {
            position: absolute;
            z-index: 3;
            top: 30px;
            left: 30px;
            line-height: 1.4;
            margin: 0;
            color: #FFFFFF;
            font-size: 26px;
        }

        /* Paragraph di atas gambar */
        .featured-card .featured-img-col p {
            position: absolute;
            z-index: 5;
            top: 42px !important;
            left: 30px;
            margin: 0;
            font-size: 14px;
            line-height: 1.2;
            width: 80%;
            color: #fff;
        }

        /* Button di atas gambar */
        .featured-card .featured-img-col a {
            position: absolute;
            z-index: 3;
            top: 120px;
            left: 30px;
            margin-top: 50px;
            color: #FFFFFF;
            background-color: #85929E;
            font-size: 12px;
            border-radius: 15px;
        }

        /* Text gambar kanan berada di sebelah kanan */
        .featured-card .featured-img-col:nth-child(2) h2,
        .featured-card .featured-img-col:nth-child(2) p,
        .featured-card .featured-img-col:nth-child(2) a {
            left: auto;
            right: 50px;
            text-align: right;
        }







        .featured-card .featured-content-col {
            flex: 0 0 52%;
            max-width: 52%;
            padding: clamp(1rem, 3.5vw, 2.5rem);
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        .featured-title {
            font-size: clamp(1rem, 2.2vw, 1.85rem);
            font-weight: 800;
            line-height: 1.2;
            letter-spacing: -0.025em;
            color: var(--text-main);
            margin-bottom: clamp(0.4rem, 1vw, 0.8rem);
        }

        .featured-desc {
            font-size: clamp(0.7rem, 1.2vw, 0.95rem);
            color: var(--text-muted);
            line-height: 1.4;
            display: -webkit-box;
            /* -webkit-line-clamp: 4; */
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .meta-read {
            font-size: 10px;
            /* font-size: clamp(0.65rem, 1.1vw, 0.825rem); */
            font-weight: 100;
            color: var(--text-main);
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .meta-dot {
            width: 5px;
            height: 5px;
            background-color: var(--text-main);
            border-radius: 50%;
            display: inline-block;
        }

        /* .bottom-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: clamp(0.5rem, 2vw, 1.25rem);
            width: 100%;
        } */

        /* Tampilan default untuk layar laptop/desktop (misal 3 kolom) */
        .bottom-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 1.5rem;
        }

        /* Tampilan Mobile (Max-width 768px atau 576px) menjadi 2 Kolom */
        @media (max-width: 768px) {
            
        }

        .bottom-card {
            display: flex;
            flex-direction: column;
            height: 100%;
        }

        .bottom-card .card-img-wrapper {
            position: relative;
            width: 100%;
            aspect-ratio: 16 / 11;
            background-color: #eeeef2;
            overflow: hidden;
        }

        .bottom-card .card-img-wrapper img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s ease;
        }

        .bottom-card:hover .card-img-wrapper img {
            transform: scale(1.05);
        }

        .bottom-card .card-img-wrapper .tag-pill {
            position: absolute;
            top: clamp(6px, 1.5vw, 14px);
            right: clamp(6px, 1.5vw, 14px);
            z-index: 2;
        }

        /* Subtle bottom image vignette like the reference image */
        .card-img-wrapper::after {
            content: "";
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 40%;
            background: linear-gradient(to top, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0) 100%);
            pointer-events: none;
        }

        .bottom-card .card-body-content {
            padding: clamp(0.75rem, 1.8vw, 1.35rem);
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            flex-grow: 1;
            background: #ffffff;
        }

        .bottom-card .card-title {
            font-size: clamp(0.75rem, 1.35vw, 1.05rem);
            font-weight: 700;
            line-height: 1.25;
            letter-spacing: -0.02em;
            margin-bottom: clamp(0.25rem, 0.8vw, 0.5rem);
            display: -webkit-box;
            /* -webkit-line-clamp: 3; */
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .bottom-card .card-desc {
            font-size: clamp(0.65rem, 1.05vw, 0.85rem);
            color: var(--text-muted);
            line-height: 1.35;
            display: -webkit-box;
            /* -webkit-line-clamp: 3; */
            -webkit-box-orient: vertical;
            overflow: hidden;
            margin-bottom: 0;
        }

        .modal-backdrop.show {
            opacity: 0.45;
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
        }

        .modal-content {
            border-radius: 28px;
            border: 1px solid rgba(255, 255, 255, 0.7);
            box-shadow: 0 30px 70px rgba(0, 0, 0, 0.18);
            background: rgba(255, 255, 255, 0.96);
            overflow: hidden;
        }

        .modal-header {
            border-bottom: none;
            padding: 1.5rem 1.75rem 0.5rem 1.75rem;
        }

        .modal-body {
            padding: 0.5rem 1.75rem 2rem 1.75rem;
        }

        .modal-body h2{
            letter-spacing: normal;
        }

        /* .modal-hero-wrapper {
            width: 100%;
            height: 280px;
            border-radius: var(--card-radius-sm);
            overflow: hidden;
            margin-bottom: 1.25rem;
            background-color: #eaeaea;
        }

        .modal-hero-wrapper img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        } */


        .modal-hero-wrapper {
            width: 100%;
            height: 100%;
            border-radius: var(--card-radius-sm, 12px);
            overflow: hidden;
            margin-bottom: 1.25rem;
            background-color: #eaeaea;
        }

        /* Pastikan komponen carousel penuh mengisi wrapper */
        .modal-hero-wrapper .carousel,
        .modal-hero-wrapper .carousel-inner,
        .modal-hero-wrapper .carousel-item {
            height: 100%;
        }

        .modal-hero-wrapper img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }































        .btn-close-custom {
            background: #ebebef;
            border: none;
            width: 36px;
            height: 36px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s ease;
            cursor: pointer;
        }

        .btn-close-custom:hover {
            background: #dcdce2;
            transform: rotate(90deg);
        }

        @media (max-width: 576px) {
            /* .dashboard-container {
                padding: 20px 10px 20px 10px;
                padding: 20px;
            } */

            /* .article-card {
                border-radius: 15px;
            } */
             

            .featured-card {
                min-height: 170px;
            }

            .featured-card .featured-content-col {
                padding: 0.75rem;
            }

            .featured-card .featured-img-col h2 {
                top: 20px;
                left: 15px;
                font-size: 14px;
                z-index: 1;
                letter-spacing: normal;
            }

            /* Text di atas gambar */
            .featured-card .featured-img-col p {
                top: 50px;
                left: 15px;
                font-size: 10px;
                /* line-height: 1.4; */
                /* margin-top: -8px; */
                z-index: 5;
            }

            /* Button di atas gambar */
            .featured-card .featured-img-col a {
                top: 80px;
                left: 15px;
                z-index: 5;
                font-size: 12px;
                padding: 6px 12px;
            }

            .featured-card .featured-img-col:nth-child(2) h2,
            .featured-card .featured-img-col:nth-child(2) p,
            .featured-card .featured-img-col:nth-child(2) a {
                left: auto;
                right: 20px;
                text-align: right;
            }













            .bottom-grid {
                grid-template-columns: repeat(2, 1fr); /* Menjadi 2 kolom rata */
                gap: 0.75rem; /* Menyesuaikan jarak antar card di mobile */
            }

            /* Penyesuaian ukuran teks & padding agar muat di 2 kolom mobile */
            .bottom-card .card-body-content {
                padding: 10px;
            }

            .bottom-card .card-title {
                font-size: 0.95rem; /* Mengecilkan judul sedikit agar tidak terlalu memakan tempat */
                line-height: 1.3;
            }

            .bottom-card .card-desc {
                font-size: 0.8rem;
                line-height: 1.3;
                /* Opsional: membatasi teks deskripsi maksimal 2-3 baris */
                display: -webkit-box;
                /* -webkit-line-clamp: 3; */
                -webkit-box-orient: vertical;
                overflow: hidden;
            }

            .bottom-card .card-body-content {
                padding: 0.55rem;
            }

            .modal-hero-wrapper {
                height: 180px;
            }
        }



















        .mxd-news-grid {
            width: 100%;
            /* max-width: 1100px; */
            /* margin: 0 auto; */
            /* padding: 15px; */
            padding: 0px 10px 50px 10px;
            margin-top: -15px;
            /* padding-bottom: 50px; */
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            grid-template-rows: 175px 175px;
            gap: 10px;
        }


        /* CARD */

        .mxd-card {
            position: relative;
            overflow: hidden;

            border-radius: 10px;

            background: #ddd;

            cursor: pointer;

            box-shadow: 0 3px 10px rgba(0,0,0,0.08);

            transition:
                transform 0.35s ease,
                box-shadow 0.35s ease;
        }


        .mxd-card img {
            position: absolute;

            inset: 0;

            width: 100%;
            height: 100%;

            object-fit: cover;

            display: block;

            transition: transform 0.5s ease;
        }


        /* POSISI CARD */

        .mxd-card-1 {
            grid-column: 1 / 3;
            grid-row: 1;
        }

        .mxd-card-2 {
            grid-column: 3;
            grid-row: 1;
        }

        .mxd-card-3 {
            grid-column: 4;
            grid-row: 1;
        }

        .mxd-card-4 {
            grid-column: 1;
            grid-row: 2;
        }

        .mxd-card-5 {
            grid-column: 2;
            grid-row: 2;
        }

        .mxd-card-6 {
            grid-column: 3 / 5;
            grid-row: 2;
        }


        /* OVERLAY */

        .mxd-overlay {
            position: absolute;

            inset: 0;

            background: linear-gradient(
                to bottom,
                rgba(0,0,0,0.03),
                rgba(0,0,0,0.05) 30%,
                rgba(0,0,0,0.48)
            );

            z-index: 1;
        }


        /* TEXT */

        .mxd-card-content {
            position: absolute;

            left: 0;
            right: 0;
            bottom: 0;

            padding: 16px;

            z-index: 2;

            color: #fff;
        }


        .mxd-card-content span {
            display: block;
            margin-bottom: 5px;
            font-size: 12px;
            font-weight: 700;
            letter-spacing: normal;
            text-transform: uppercase;
        }


        .mxd-card-content h3 {
            margin: 0;
            font-size: 26px;
            line-height: 1.15;
            font-weight: 700;
            color: #fff;
        }


        /* BUTTON */

        .mxd-read-btn {
            display: inline-block;

            margin-top: 12px;

            padding: 8px 20px;

            background: #fff;

            color: #555;

            font-size: 8px;

            line-height: 1;

            text-decoration: none;

            border-radius: 10px;

            transition: 0.25s ease;
        }


        .mxd-read-btn:hover {
            background: #fff;

            color: #0096C7;
        }


        /* HOVER */

        .mxd-card:hover {
            transform: translateY(-3px);

            box-shadow: 0 8px 20px rgba(0,0,0,0.15);
        }


        .mxd-card:hover img {
            transform: scale(1.06);
        }








        /* dari supply2.css */
        /* =========================================
   CARD SECTION
========================================= */

.card-section {
    width: 100%;
    max-width: 100%;
    padding: 30px 0px 20px 0px;
    box-sizing: border-box;
    /* padding: 304px 0 0; */
}


/* =========================================
   ROW
========================================= */

.card-row {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;

    width: 100%;
    max-width: 100%;

    margin-left: 0;
    margin-right: 0;

    box-sizing: border-box;
}


/* =========================================
   COLUMN
   Semua col mempunyai tinggi yang sama
========================================= */

.card-column {
    display: flex;
    align-items: stretch;

    margin-bottom: 20px;

    box-sizing: border-box;

    max-width: 100%;
}

.card-columns {
    display: flex;
    align-items: stretch;

    margin-bottom: 20px;

    box-sizing: border-box;

    max-width: 100%;
}


/* =========================================
   CARD
========================================= */

.custom-card {

    position: relative;

    width: 100%;
    max-width: 100%;

    /*
       Tinggi minimum.
       Karena column menggunakan flex stretch,
       semua card dalam satu row akan mengikuti
       tinggi card yang paling tinggi.
    */
    min-height: 170px;

    height: 100%;

    box-sizing: border-box;

    background: rgba(255, 255, 255, 0.96);

    border: 1px solid #e7ebef;

    border-radius: 16px;

    padding: 13px;

    cursor: pointer;

    display: flex;
    flex-direction: column;

    overflow: hidden;

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease,
        background .3s ease;
}


/* =========================================
   CARD HOVER
========================================= */

.custom-card:hover {

    transform: translateY(-5px);

    background: #ffffff;

    border-color: #dfe4e9;

    box-shadow:
        0 12px 28px rgba(32, 45, 60, 0.10);
}


/* =========================================
   TOP
========================================= */

.card-top {

    width: 100%;
    max-width: 100%;

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 9px;

    box-sizing: border-box;
}


/* =========================================
   ICON
========================================= */

.card-icon {

    width: 32px;
    height: 32px;

    min-width: 32px;

    display: flex;

    align-items: center;
    justify-content: center;

    background: #f0f3f5;

    color: #555d66;

    border: 1px solid #e8ecef;

    border-radius: 9px;

    font-size: 14px;

    transition:
        background .3s ease,
        color .3s ease,
        transform .3s ease;
}


.custom-card:hover .card-icon {

    background: #e9edf0;

    transform: scale(1.05);
}


/* =========================================
   CHECK ICON
========================================= */

.card-check {

    width: 22px;
    height: 22px;

    min-width: 22px;

    display: flex;

    align-items: center;
    justify-content: center;

    background: #f4f6f7;

    color: #70777e;

    border: 1px solid #e9edef;

    border-radius: 50%;

    font-size: 10px;

    transition:
        background .3s ease,
        color .3s ease;
}


.custom-card:hover .card-check {

    background: #eceff1;

    color: #444b52;
}


/* =========================================
   TITLE
========================================= */

.card-title {

    margin: 0;

    color: #30343b;

    font-size: 15px;

    line-height: 18px;

    font-weight: 600;

    letter-spacing: -0.2px;

    max-width: 100%;

    word-wrap: break-word;

    overflow-wrap: break-word;
}


/* =========================================
   DESCRIPTION
========================================= */

.card-description {

    margin-top: 7px;

    margin-bottom: 10px;

    color: #969da4;

    font-size: 8.5px;

    line-height: 12px;

    font-weight: 400;

    /*
       Tinggi description dibuat konsisten
       sehingga tombol berada pada posisi
       yang sama.
    */
    min-height: 36px;

    max-height: 36px;

    display: -webkit-box;

    -webkit-line-clamp: 3;

    -webkit-box-orient: vertical;

    overflow: hidden;

    max-width: 100%;

    word-wrap: break-word;

    overflow-wrap: break-word;
}


/* =========================================
   BUTTON
========================================= */

.card-button {

    width: 100%;
    max-width: 100%;

    height: 27px;

    min-height: 27px;

    margin-top: auto;

    padding: 0 10px;

    border: 1px solid #e7eaed;

    border-radius: 20px;

    background: #f3f5f6;

    color: #555c63;

    font-size: 8px;

    font-weight: 500;

    letter-spacing: .1px;

    transition:
        background .3s ease,
        border-color .3s ease,
        transform .3s ease;

    box-sizing: border-box;
}


.card-button:hover {

    background: #e9ecef;

    border-color: #dfe3e6;
}


/* =========================================
   GLOBAL OVERFLOW FIX
========================================= */


/* =========================================
   MOBILE
========================================= */

@media (max-width: 575.98px) {


    /* -----------------------------------------
       CARD SECTION
    ----------------------------------------- */

    .card-section {

        width: 100%;
        max-width: 100%;

        padding: 20px 8px;

        box-sizing: border-box;
    }


    /* -----------------------------------------
       ROW
    ----------------------------------------- */

    .card-row {

        width: 100%;
        max-width: 100%;

        margin-left: 0 !important;
        margin-right: 0 !important;

        align-items: stretch;

        box-sizing: border-box;
    }


    /* -----------------------------------------
       COLUMN
    ----------------------------------------- */

    .card-column {

        padding-left: 5px;
        padding-right: 5px;

        margin-bottom: 10px;

        display: flex;

        align-items: stretch;

        box-sizing: border-box;

        max-width: 100%;
    }


    /* -----------------------------------------
       CARD
    ----------------------------------------- */

    .custom-card {

        width: 100%;
        max-width: 100%;

        min-height: 170px;

        height: 100%;

        padding: 11px;

        border-radius: 14px;

        box-sizing: border-box;
    }


    /* -----------------------------------------
       CARD TOP
    ----------------------------------------- */

    .card-top {

        width: 100%;
        max-width: 100%;

        box-sizing: border-box;
    }


    /* -----------------------------------------
       TITLE
    ----------------------------------------- */

    .card-title {

        font-size: 14px;

        line-height: 17px;

        max-width: 100%;
    }


    /* -----------------------------------------
       DESCRIPTION
    ----------------------------------------- */

    .card-description {

        font-size: 8px;

        line-height: 11px;

        min-height: 33px;

        max-height: 33px;

        max-width: 100%;
    }


    /* -----------------------------------------
       BUTTON
    ----------------------------------------- */

    .card-button {

        width: 100%;
        max-width: 100%;

        height: 26px;

        min-height: 26px;

        font-size: 8px;
    }

}


/* =========================================
   SMALL MOBILE
   360px ke bawah
========================================= */

@media (max-width: 380px) {

    .card-section {

        padding-left: 5px;
        padding-right: 5px;
    }


    .card-column {

        padding-left: 4px;
        padding-right: 4px;
    }


    .custom-card {

        padding: 10px;

        border-radius: 13px;
    }


    .card-title {

        font-size: 13px;

        line-height: 16px;
    }


    .card-description {

        font-size: 7.5px;

        line-height: 10px;

        min-height: 30px;

        max-height: 30px;
    }


    .card-button {

        font-size: 7.5px;

        height: 25px;

        min-height: 25px;
    }

}

















        /* =========================
        TABLET
        ========================= */

        @media (max-width: 768px) {

            .mxd-news-grid {
                padding: 10px;
                gap: 7px;

                grid-template-rows:
                    145px
                    145px;
            }

            .mxd-card-content {
                padding: 11px;
            }

            .mxd-card-content h3 {
                font-size: 14px;
            }

            .mxd-card-content span {
                font-size: 10px;
            }

            .mxd-read-btn {
                font-size: 6px;
                padding: 4px 7px;
                margin-top: 7px;
            }
        }


        /* =========================
        MOBILE
        ========================= */

        @media (max-width: 576px) {

            .mxd-news-grid {
                width: 100%;

                padding: 7px;
                gap: 5px;

                /* TETAP 4 KOLOM */
                grid-template-columns: repeat(4, 1fr);

                grid-template-rows:
                    105px
                    105px;
            }


            .mxd-card {
                border-radius: 5px;
            }


            .mxd-card-content {
                padding: 7px;
            }


            .mxd-card-content span {
                font-size: 8px;
                margin-bottom: 3px;
                letter-spacing: normal;
            }


            .mxd-card-content h3 {
                font-size: 12px;
                line-height: 1.12;
            }


            .mxd-read-btn {
                margin-top: 5px;

                padding: 3px 5px;

                font-size: 4.5px;
            }
        }


        /* HP KECIL */

        @media (max-width: 380px) {

            .mxd-news-grid {
                padding: 5px;
                gap: 4px;

                grid-template-rows:
                    90px
                    90px;
            }

            .mxd-card-content {
                padding: 5px;
            }

            .mxd-card-content h3 {
                font-size: 7px;
            }

            .mxd-card-content span {
                font-size: 4px;
            }

            .mxd-read-btn {
                font-size: 4px;

                padding: 2px 4px;

                margin-top: 3px;
            }
        }