/*
 * ============================================================
 * UAPIK_HOME_POLISH_REBRAND_V1
 * ============================================================
 *
 * Responsive product-home presentation:
 *
 * Mobile  = Android-style creative app home
 * Tablet  = navigation rail + first-class workspace
 * Desktop = premium creative launcher
 *
 * Also applies visible uApik.id shell branding.
 * ============================================================
 */


:root {
    --uapik-cyan:
        #18d4ec;

    --uapik-blue:
        #4f79ff;

    --uapik-violet:
        #7356ff;

    --uapik-purple:
        #9650ed;
}


/*
 * ============================================================
 * BRAND
 * ============================================================
 */


.brand__mark {
    position:
        relative;

    background:
        transparent
        url("../images/icon_uapik.png")
        center
        / contain
        no-repeat !important;

    box-shadow:
        none !important;
}


.brand__mark::before {
    display:
        none !important;
}


.brand__text strong {
    color:
        #151827;

    font-weight:
        850;

    letter-spacing:
        -.035em;
}


.brand__text span {
    color:
        #7c8599;
}


.app-topbar {
    background:
        rgba(255, 255, 255, .93);

    border-bottom-color:
        rgba(15, 23, 42, .075);
}


/*
 * ============================================================
 * HOME FOUNDATION
 * ============================================================
 */


.uapik-home {
    width:
        100%;
}


.uapik-home .home-heading {
    margin:
        3px 0 20px;
}


.uapik-home .home-heading .eyebrow {
    display:
        inline-block;

    color:
        transparent;

    background:
        linear-gradient(
            90deg,
            var(--uapik-cyan),
            var(--uapik-blue) 48%,
            var(--uapik-violet)
        );

    -webkit-background-clip:
        text;

    background-clip:
        text;

    font-size:
        11px;

    font-weight:
        850;

    letter-spacing:
        .095em;
}


.uapik-home .home-heading h1 {
    margin:
        8px 0 7px;

    max-width:
        720px;

    color:
        #131624;

    font-weight:
        850;

    letter-spacing:
        -.05em;
}


.uapik-home .home-heading p {
    max-width:
        720px;

    color:
        #69748a;
}


/*
 * ============================================================
 * HERO
 * ============================================================
 */


.uapik-home .hero-create {
    isolation:
        isolate;

    min-height:
        255px;

    border:
        1px solid rgba(255, 255, 255, .18);

    border-radius:
        29px;

    background:
        radial-gradient(
            circle at 82% 13%,
            rgba(255, 255, 255, .31),
            transparent 24%
        ),
        radial-gradient(
            circle at 92% 85%,
            rgba(173, 69, 255, .28),
            transparent 30%
        ),
        linear-gradient(
            128deg,
            #18c9e7 0%,
            #4587ff 31%,
            #615dff 61%,
            #884fff 100%
        );

    box-shadow:
        0 22px 55px
        rgba(72, 88, 230, .20);
}


.uapik-home .hero-create::before {
    content:
        '';

    position:
        absolute;

    z-index:
        0;

    width:
        360px;

    height:
        360px;

    top:
        -245px;

    right:
        8%;

    border:
        1px solid rgba(255, 255, 255, .18);

    border-radius:
        50%;

    pointer-events:
        none;
}


.uapik-home .hero-create::after {
    content:
        '';

    position:
        absolute;

    z-index:
        0;

    width:
        260px;

    height:
        260px;

    right:
        -105px;

    bottom:
        -150px;

    border:
        1px solid rgba(255, 255, 255, .16);

    border-radius:
        50%;

    pointer-events:
        none;
}


.uapik-home .hero-create__content {
    z-index:
        2;

    max-width:
        690px;
}


.uapik-home .hero-create__badge {
    padding:
        7px 11px;

    background:
        rgba(255, 255, 255, .16);

    border:
        1px solid rgba(255, 255, 255, .16);

    backdrop-filter:
        blur(10px);

    -webkit-backdrop-filter:
        blur(10px);
}


.uapik-home .hero-create h2 {
    max-width:
        560px;

    margin:
        15px 0 9px;

    font-weight:
        850;

    letter-spacing:
        -.052em;
}


.uapik-home .hero-create p {
    max-width:
        575px;

    color:
        rgba(255, 255, 255, .84);
}


.uapik-home .hero-create__actions {
    position:
        relative;

    z-index:
        3;
}


.uapik-home .primary-button,
.uapik-home .secondary-button {
    min-height:
        48px;

    border-radius:
        16px;

    font-weight:
        800;
}


.uapik-home .primary-button {
    box-shadow:
        0 12px 28px
        rgba(24, 31, 105, .15);
}


.uapik-home .hero-create__visual {
    z-index:
        1;

    width:
        270px;

    height:
        220px;

    right:
        21px;

    bottom:
        -3px;

    opacity:
        1;
}


.uapik-home .uapik-home-hero__logo {
    position:
        absolute;

    z-index:
        5;

    width:
        148px;

    height:
        148px;

    right:
        42px;

    top:
        28px;

    object-fit:
        contain;

    opacity:
        .88;

    filter:
        drop-shadow(
            0 20px 28px
            rgba(39, 36, 124, .17)
        );

    pointer-events:
        none;
}


.uapik-home .visual-card {
    border-color:
        rgba(255, 255, 255, .23);

    background:
        rgba(255, 255, 255, .10);

    backdrop-filter:
        blur(4px);

    -webkit-backdrop-filter:
        blur(4px);
}


/*
 * ============================================================
 * SECTIONS
 * ============================================================
 */


.uapik-home .section-heading {
    margin-top:
        34px;

    margin-bottom:
        12px;
}


.uapik-home .section-heading h2 {
    color:
        #171a27;

    font-weight:
        830;

    letter-spacing:
        -.028em;
}


.uapik-home .section-heading p {
    color:
        #8a93a6;
}


.uapik-home .text-button {
    color:
        #625bff;

    font-weight:
        800;
}


/*
 * ============================================================
 * TOOL CARDS
 * ============================================================
 */


.uapik-home .tool-card {
    border-color:
        rgba(15, 23, 42, .07);

    background:
        rgba(255, 255, 255, .94);

    box-shadow:
        0 9px 28px
        rgba(22, 29, 58, .045);
}


.uapik-home .tool-card:hover {
    transform:
        translateY(-2px);

    border-color:
        rgba(92, 83, 255, .18);

    box-shadow:
        0 16px 34px
        rgba(28, 36, 78, .08);
}


.uapik-home
.tool-grid--featured
.tool-card:nth-child(1)
.tool-card__icon {
    color:
        #625bff;

    background:
        #efedff;
}


.uapik-home
.tool-grid--featured
.tool-card:nth-child(2)
.tool-card__icon {
    color:
        #119f98;

    background:
        #e9faf7;
}


.uapik-home
.tool-grid--featured
.tool-card:nth-child(3)
.tool-card__icon {
    color:
        #e69616;

    background:
        #fff4dc;
}


.uapik-home
.tool-grid--featured
.tool-card:nth-child(4)
.tool-card__icon {
    color:
        #7557e8;

    background:
        #f0ecff;
}


.uapik-home .horizontal-tools .tool-card,
.uapik-home .quick-grid .tool-card {
    background:
        linear-gradient(
            180deg,
            #ffffff,
            #fcfcff
        );
}


.uapik-home .horizontal-tools .tool-card__icon,
.uapik-home .quick-grid .tool-card__icon {
    background:
        linear-gradient(
            145deg,
            #efedff,
            #f6f5ff
        );
}


/*
 * ============================================================
 * RECENT PROJECTS
 * ============================================================
 */


.uapik-home .recent-panel {
    margin-top:
        36px;

    border:
        1px solid rgba(15, 23, 42, .07);

    border-radius:
        26px;

    background:
        rgba(255, 255, 255, .90);

    box-shadow:
        0 12px 34px
        rgba(26, 34, 68, .045);
}


/*
 * ============================================================
 * MOBILE
 * Android-style home
 * ============================================================
 */


@media (max-width: 767.98px) {

    .app-topbar {
        background:
            rgba(255, 255, 255, .96);

        box-shadow:
            0 2px 12px
            rgba(22, 29, 58, .025);
    }


    .brand {
        gap:
            10px;
    }


    .brand__mark {
        width:
            39px;

        height:
            39px;
    }


    .brand__text strong {
        font-size:
            15px;
    }


    .brand__text span {
        font-size:
            10.5px;
    }


    .uapik-home .home-heading {
        margin:
            1px 2px 15px;
    }


    .uapik-home .home-heading .eyebrow {
        font-size:
            10px;
    }


    .uapik-home .home-heading h1 {
        margin:
            7px 0 6px;

        font-size:
            clamp(
                29px,
                8.1vw,
                34px
            );

        line-height:
            1.02;
    }


    .uapik-home .home-heading p {
        font-size:
            12.5px;

        line-height:
            1.5;
    }


    .uapik-home .hero-create {
        min-height:
            268px;

        padding:
            22px 20px;

        border-radius:
            26px;
    }


    .uapik-home .hero-create__content {
        max-width:
            84%;
    }


    .uapik-home .hero-create__badge {
        padding:
            6px 9px;

        font-size:
            9px;
    }


    .uapik-home .hero-create h2 {
        margin:
            14px 0 8px;

        max-width:
            330px;

        font-size:
            clamp(
                29px,
                8vw,
                34px
            );

        line-height:
            1.02;
    }


    .uapik-home .hero-create p {
        max-width:
            310px;

        font-size:
            12px;

        line-height:
            1.48;
    }


    .uapik-home .hero-create__actions {
        width:
            min(
                100%,
                330px
            );

        margin-top:
            18px;

        display:
            grid;

        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

        gap:
            8px;
    }


    .uapik-home .primary-button,
    .uapik-home .secondary-button {
        min-width:
            0;

        padding:
            0 11px;

        font-size:
            11.5px;
    }


    .uapik-home .hero-create__visual {
        width:
            175px;

        height:
            190px;

        right:
            -35px;

        bottom:
            -9px;

        opacity:
            .72;
    }


    .uapik-home .uapik-home-hero__logo {
        width:
            112px;

        height:
            112px;

        right:
            24px;

        top:
            34px;

        opacity:
            .34;
    }


    .uapik-home .visual-card {
        opacity:
            .48;
    }


    .uapik-home .section-heading {
        margin-top:
            29px;

        margin-bottom:
            11px;
    }


    .uapik-home .section-heading h2 {
        font-size:
            18px;
    }


    .uapik-home .section-heading p {
        margin-top:
            2px;

        font-size:
            10.5px;
    }


    /*
     * Four primary creators become an app-launcher style 2 × 2.
     */
    .uapik-home .tool-grid--featured {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            ) !important;

        gap:
            10px;
    }


    .uapik-home
    .tool-grid--featured
    .tool-card {
        position:
            relative;

        min-height:
            145px;

        padding:
            15px;

        flex-direction:
            column;

        align-items:
            flex-start;

        gap:
            11px;

        border-radius:
            22px;
    }


    .uapik-home
    .tool-grid--featured
    .tool-card__icon {
        width:
            45px;

        height:
            45px;

        border-radius:
            15px;
    }


    .uapik-home
    .tool-grid--featured
    .tool-card__body strong {
        margin-bottom:
            4px;

        font-size:
            13.5px;
    }


    .uapik-home
    .tool-grid--featured
    .tool-card__body span {
        display:
            -webkit-box;

        overflow:
            hidden;

        -webkit-box-orient:
            vertical;

        -webkit-line-clamp:
            2;

        font-size:
            10px;

        line-height:
            1.4;
    }


    .uapik-home
    .tool-grid--featured
    .tool-card__arrow {
        position:
            absolute;

        top:
            17px;

        right:
            14px;
    }


    /*
     * AI remains swipeable like a native horizontal shelf.
     */
    .uapik-home .horizontal-tools {
        scroll-padding-left:
            max(
                16px,
                var(--safe-left)
            );

        gap:
            10px;
    }


    .uapik-home
    .horizontal-tools
    .tool-card--compact {
        min-height:
            108px;

        border-radius:
            20px;
    }


    /*
     * Quick tools stay dense and immediately scannable.
     */
    .uapik-home .quick-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            ) !important;

        gap:
            10px;
    }


    .uapik-home
    .quick-grid
    .tool-card--compact {
        min-height:
            102px;

        border-radius:
            20px;
    }


    .uapik-home .recent-panel {
        margin-top:
            31px;

        border-radius:
            23px;
    }
}


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


@media
(min-width: 768px)
and
(max-width: 1199.98px) {

    .brand__mark {
        width:
            42px;

        height:
            42px;
    }


    .uapik-home .home-heading {
        margin-bottom:
            21px;
    }


    .uapik-home .home-heading h1 {
        font-size:
            clamp(
                37px,
                5vw,
                48px
            );
    }


    .uapik-home .hero-create {
        min-height:
            280px;

        padding:
            36px;

        border-radius:
            30px;
    }


    .uapik-home .hero-create h2 {
        max-width:
            500px;

        font-size:
            clamp(
                34px,
                4.5vw,
                44px
            );
    }


    .uapik-home .hero-create__visual {
        width:
            255px;

        height:
            220px;

        right:
            8px;
    }


    .uapik-home .uapik-home-hero__logo {
        width:
            145px;

        height:
            145px;

        right:
            38px;

        top:
            31px;
    }


    .uapik-home .tool-grid--featured {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            ) !important;
    }


    .uapik-home .horizontal-tools {
        margin-left:
            0;

        margin-right:
            0;

        padding:
            0;

        grid-auto-flow:
            initial;

        grid-auto-columns:
            initial;

        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            );

        overflow:
            visible;
    }


    .uapik-home .quick-grid {
        grid-template-columns:
            repeat(
                4,
                minmax(0, 1fr)
            ) !important;
    }
}


/*
 * Wider tablet gets true desktop-like creator density
 * without inheriting desktop navigation geometry.
 */
@media
(min-width: 1024px)
and
(max-width: 1199.98px) {

    .uapik-home .tool-grid--featured {
        grid-template-columns:
            repeat(
                4,
                minmax(0, 1fr)
            ) !important;
    }


    .uapik-home
    .tool-grid--featured
    .tool-card {
        min-height:
            116px;
    }


    .uapik-home .horizontal-tools {
        grid-template-columns:
            repeat(
                5,
                minmax(0, 1fr)
            );
    }
}


/*
 * ============================================================
 * DESKTOP
 * ============================================================
 */


@media (min-width: 1200px) {

    /*
     * Full official logo becomes desktop sidebar identity.
     */
    .sidebar-brand {
        min-height:
            58px;

        margin-bottom:
            30px !important;
    }


    .sidebar-brand .brand {
        width:
            198px;

        height:
            58px;

        display:
            block !important;

        background:
            transparent
            url("../images/logo_uapik.png")
            left center
            / contain
            no-repeat;
    }


    .sidebar-brand .brand__mark,
    .sidebar-brand .brand__text {
        display:
            none !important;
    }


    .app-topbar::before {
        content:
            "uApik.id Workspace" !important;

        color:
            #7b8498 !important;

        font-weight:
            750 !important;
    }


    .uapik-home .home-heading {
        margin-bottom:
            25px;
    }


    .uapik-home .home-heading h1 {
        max-width:
            780px;

        font-size:
            clamp(
                43px,
                3.6vw,
                56px
            );
    }


    .uapik-home .home-heading p {
        max-width:
            780px;

        font-size:
            14px;
    }


    .uapik-home .hero-create {
        min-height:
            310px;

        padding:
            46px 50px;

        border-radius:
            32px;
    }


    .uapik-home .hero-create h2 {
        max-width:
            610px;

        font-size:
            clamp(
                40px,
                3.7vw,
                53px
            );
    }


    .uapik-home .hero-create p {
        max-width:
            610px;

        font-size:
            14px;
    }


    .uapik-home .hero-create__visual {
        width:
            330px;

        height:
            260px;

        right:
            35px;

        bottom:
            -8px;
    }


    .uapik-home .uapik-home-hero__logo {
        width:
            180px;

        height:
            180px;

        right:
            55px;

        top:
            31px;
    }


    /*
     * Four creator products = one confident row.
     */
    .uapik-home .tool-grid--featured {
        grid-template-columns:
            repeat(
                4,
                minmax(0, 1fr)
            ) !important;

        gap:
            12px;
    }


    .uapik-home
    .tool-grid--featured
    .tool-card {
        min-height:
            108px;

        border-radius:
            21px;
    }


    /*
     * Five AI tools occupy the product shelf completely.
     */
    .uapik-home .horizontal-tools {
        margin-left:
            0;

        margin-right:
            0;

        padding:
            0;

        grid-auto-flow:
            initial;

        grid-auto-columns:
            initial;

        grid-template-columns:
            repeat(
                5,
                minmax(0, 1fr)
            );

        overflow:
            visible;

        gap:
            11px;
    }


    .uapik-home
    .horizontal-tools
    .tool-card--compact {
        min-height:
            118px;

        border-radius:
            21px;
    }


    .uapik-home .quick-grid {
        grid-template-columns:
            repeat(
                4,
                minmax(0, 1fr)
            ) !important;

        gap:
            12px;
    }


    .uapik-home
    .quick-grid
    .tool-card--compact {
        min-height:
            112px;

        border-radius:
            21px;
    }


    .uapik-home .recent-panel {
        padding:
            2px;

        border-radius:
            28px;
    }
}


/*
 * ============================================================
 * REDUCED MOTION
 * ============================================================
 */


@media (prefers-reduced-motion: reduce) {

    .uapik-home .tool-card:hover {
        transform:
            none;
    }
}


/*
 * ============================================================
 * UAPIK_HOME_QUICK_TOOLS_COMPACT_GRID_V1
 * ============================================================
 *
 * Quick Tools are utility launchers, not creator cards.
 *
 * DESKTOP/TABLET
 *   3 columns x 2 rows
 *   icon left + title/description right
 *
 * MOBILE
 *   2 columns x 3 rows
 *   compact icon + title + 2-line description
 *
 * AI shelf and creator cards are intentionally untouched.
 * ============================================================
 */


/*
 * ------------------------------------------------------------
 * SHARED QUICK HOME CARD
 * ------------------------------------------------------------
 */

.uapik-home
.quick-grid {
    display:
        grid;

    grid-template-columns:
        repeat(
            3,
            minmax(
                0,
                1fr
            )
        ) !important;

    gap:
        12px;
}


.uapik-home
.quick-grid
.tool-card--quick-home {
    position:
        relative;

    min-width:
        0;

    min-height:
        90px !important;

    display:
        grid !important;

    grid-template-columns:
        48px
        minmax(
            0,
            1fr
        );

    align-items:
        center;

    align-content:
        center;

    gap:
        14px !important;

    padding:
        14px
        16px !important;

    border-radius:
        18px !important;

    text-align:
        left;

    overflow:
        hidden;
}


.uapik-home
.quick-grid
.tool-card--quick-home
.tool-card__icon {
    width:
        48px !important;

    height:
        48px !important;

    min-width:
        48px;

    display:
        grid;

    place-items:
        center;

    margin:
        0 !important;

    border-radius:
        14px !important;

    color:
        #625bff;

    background:
        linear-gradient(
            145deg,
            #efedff,
            #f7f6ff
        );
}


.uapik-home
.quick-grid
.tool-card--quick-home
.tool-card__body {
    min-width:
        0;

    display:
        block !important;

    margin:
        0 !important;

    text-align:
        left;
}


.uapik-home
.quick-grid
.tool-card--quick-home
.tool-card__body
strong {
    display:
        block;

    margin:
        0
        0
        4px !important;

    color:
        #171b2c;

    font-size:
        13.5px !important;

    font-weight:
        800;

    line-height:
        1.2;
}


.uapik-home
.quick-grid
.tool-card--quick-home
.tool-card__body
span {
    display:
        -webkit-box !important;

    overflow:
        hidden;

    color:
        #7e899f;

    font-size:
        10.5px !important;

    font-weight:
        500;

    line-height:
        1.4;

    -webkit-box-orient:
        vertical;

    -webkit-line-clamp:
        2;

    text-wrap:
        pretty;
}


/*
 * A very subtle utility affordance keeps the cards from feeling
 * like blank creator tiles while staying visually light.
 */

.uapik-home
.quick-grid
.tool-card--quick-home::after {
    content:
        "›";

    position:
        absolute;

    top:
        50%;

    right:
        12px;

    color:
        rgba(
            98,
            91,
            255,
            .40
        );

    font-size:
        20px;

    font-weight:
        500;

    line-height:
        1;

    opacity:
        0;

    transform:
        translate(
            -3px,
            -50%
        );

    transition:
        opacity .16s ease,
        transform .16s ease;
}


@media (
    hover: hover
) and (
    pointer: fine
) {

    .uapik-home
    .quick-grid
    .tool-card--quick-home:hover::after {
        opacity:
            1;

        transform:
            translate(
                0,
                -50%
            );
    }
}


/*
 * ------------------------------------------------------------
 * TABLET
 * ------------------------------------------------------------
 */

@media
(min-width: 768px)
and
(max-width: 1199.98px) {

    .uapik-home
    .quick-grid {
        grid-template-columns:
            repeat(
                3,
                minmax(
                    0,
                    1fr
                )
            ) !important;

        gap:
            11px;
    }


    .uapik-home
    .quick-grid
    .tool-card--quick-home {
        min-height:
            94px !important;

        grid-template-columns:
            44px
            minmax(
                0,
                1fr
            );

        gap:
            11px !important;

        padding:
            13px !important;
    }


    .uapik-home
    .quick-grid
    .tool-card--quick-home
    .tool-card__icon {
        width:
            44px !important;

        height:
            44px !important;

        min-width:
            44px;

        border-radius:
            13px !important;
    }


    .uapik-home
    .quick-grid
    .tool-card--quick-home
    .tool-card__body
    strong {
        font-size:
            12.5px !important;
    }


    .uapik-home
    .quick-grid
    .tool-card--quick-home
    .tool-card__body
    span {
        font-size:
            9.5px !important;
    }
}


/*
 * ------------------------------------------------------------
 * MOBILE
 * ------------------------------------------------------------
 */

@media (max-width: 767.98px) {

    .uapik-home
    .quick-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(
                    0,
                    1fr
                )
            ) !important;

        gap:
            10px;
    }


    .uapik-home
    .quick-grid
    .tool-card--quick-home {
        min-height:
            116px !important;

        display:
            flex !important;

        flex-direction:
            column;

        align-items:
            flex-start;

        justify-content:
            flex-start;

        gap:
            8px !important;

        padding:
            12px !important;

        border-radius:
            18px !important;
    }


    .uapik-home
    .quick-grid
    .tool-card--quick-home
    .tool-card__icon {
        width:
            40px !important;

        height:
            40px !important;

        min-width:
            40px;

        border-radius:
            13px !important;
    }


    .uapik-home
    .quick-grid
    .tool-card--quick-home
    .tool-card__body {
        width:
            100%;
    }


    .uapik-home
    .quick-grid
    .tool-card--quick-home
    .tool-card__body
    strong {
        margin-bottom:
            3px !important;

        font-size:
            12px !important;
    }


    .uapik-home
    .quick-grid
    .tool-card--quick-home
    .tool-card__body
    span {
        max-width:
            100%;

        font-size:
            9.5px !important;

        line-height:
            1.35;

        -webkit-line-clamp:
            2;
    }


    .uapik-home
    .quick-grid
    .tool-card--quick-home::after {
        display:
            none;
    }
}


/*
 * Very narrow phones:
 * preserve the 2-column launcher without oversized whitespace.
 */

@media (max-width: 380px) {

    .uapik-home
    .quick-grid
    .tool-card--quick-home {
        min-height:
            112px !important;

        padding:
            11px !important;
    }


    .uapik-home
    .quick-grid
    .tool-card--quick-home
    .tool-card__body
    strong {
        font-size:
            11.5px !important;
    }


    .uapik-home
    .quick-grid
    .tool-card--quick-home
    .tool-card__body
    span {
        font-size:
            9px !important;
    }
}


/* UAPIK_HOME_RECENT_SECTION_CARD_GRID_V1 */
@media (min-width: 768px) {
    .uapik-home .recent-panel {
        margin-top: 29px;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }

    .uapik-home .recent-panel .section-heading--inside {
        margin: 0 0 13px;
    }

    .uapik-home .project-recent-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .uapik-home .project-recent-list > .projects-empty {
        min-height: 112px;
        padding: 18px;
        border: 1px solid rgba(15, 23, 42, .07);
        border-radius: 21px;
        background: linear-gradient(180deg, #ffffff, #fcfcff);
        box-shadow: 0 8px 24px rgba(24, 28, 45, .045);
    }
}

@media (min-width: 1200px) {
    .uapik-home .project-recent-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}