/* ==========================================================
   HACKER WEB — PROJECTS V3
   ========================================================== */

.hw-projects3,
.hw-projects3 *,
.hw-projects3 *::before,
.hw-projects3 *::after {
    box-sizing:
        border-box;
}


.hw-projects3 {
    width:
        min(
            1280px,
            calc(100% - 48px)
        );

    margin:
        0 auto;

    padding:
        42px 0
        80px;

    color:
        #eef1ef;
}


.hw-projects3 a {
    text-decoration:
        none;
}


.hw-projects3-label {
    color:
        #718087;

    font-size:
        11px;

    font-weight:
        850;

    letter-spacing:
        .16em;

    text-transform:
        uppercase;
}



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

.hw-projects3-hero {
    padding:
        37px 0
        53px;

    border-bottom:
        1px solid
        rgba(255,255,255,.075);
}


.hw-projects3-kicker {
    display:
        flex;

    align-items:
        center;

    gap:
        11px;

    color:
        #8e989d;

    font-size:
        11px;

    font-weight:
        850;

    letter-spacing:
        .17em;
}


.hw-projects3-kicker > span {
    width:
        7px;

    height:
        7px;

    border-radius:
        50%;

    background:
        #a8ff00;

    box-shadow:
        0 0 12px
        rgba(168,255,0,.52);
}


.hw-projects3-kicker > b {
    margin-left:
        auto;

    color:
        #4f5c62;

    font-size:
        10px;
}


.hw-projects3-hero-grid {
    display:
        grid;

    grid-template-columns:
        minmax(0,1.1fr)
        minmax(360px,.47fr);

    align-items:
        end;

    gap:
        70px;

    margin-top:
        38px;
}


.hw-projects3 h1 {
    max-width:
        930px;

    margin:
        0;

    color:
        #f3f5f3;

    font-size:
        clamp(
            72px,
            8vw,
            122px
        );

    line-height:
        .84;

    font-weight:
        1000;

    letter-spacing:
        -.075em;
}


.hw-projects3 h1 span {
    display:
        block;

    color:
        #a8ff00;
}


.hw-projects3-hero-copy p {
    margin:
        0 0
        25px;

    color:
        #929ca1;

    font-size:
        16px;

    line-height:
        1.7;
}


.hw-projects3-hero-copy a {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    min-height:
        55px;

    padding:
        0 20px;

    border:
        1px solid
        rgba(168,255,0,.45);

    border-radius:
        999px;

    color:
        #dce2df;

    font-size:
        11px;

    font-weight:
        900;

    letter-spacing:
        .07em;
}


.hw-projects3-hero-copy a b {
    color:
        #a8ff00;

    font-size:
        21px;

    font-weight:
        400;
}



/* ==========================================================
   STATS
   ========================================================== */

.hw-projects3-stats {
    display:
        grid;

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

    margin-top:
        45px;

    border-top:
        1px solid
        rgba(255,255,255,.075);

    border-left:
        1px solid
        rgba(255,255,255,.075);
}


.hw-projects3-stats > div {
    min-height:
        93px;

    padding:
        18px;

    border-right:
        1px solid
        rgba(255,255,255,.075);

    border-bottom:
        1px solid
        rgba(255,255,255,.075);
}


.hw-projects3-stats span {
    display:
        block;

    margin-bottom:
        7px;

    color:
        #f1f3f2;

    font-size:
        25px;

    font-weight:
        900;

    letter-spacing:
        -.04em;
}


.hw-projects3-stats > div:nth-child(2)
span,
.hw-projects3-stats > div:nth-child(4)
span {
    color:
        #59c7ff;
}


.hw-projects3-stats small {
    color:
        #66737a;

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        .10em;
}



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

.hw-project3 {
    display:
        grid;

    grid-template-columns:
        minmax(0,1.08fr)
        minmax(390px,.72fr);

    gap:
        62px;

    align-items:
        center;

    padding:
        72px 0;

    border-bottom:
        1px solid
        rgba(255,255,255,.075);
}


.hw-project3-reverse
.hw-project3-visual {
    order:
        2;
}


.hw-project3-reverse
.hw-project3-content {
    order:
        1;
}



/* ==========================================================
   VISUAL
   ========================================================== */

.hw-project3-visual {
    position:
        relative;

    min-width:
        0;
}


.hw-project3-browser {
    position:
        relative;

    z-index:
        2;

    overflow:
        hidden;

    aspect-ratio:
        16 / 10;

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

    border-radius:
        18px;

    background:
        #050a0d;

    box-shadow:
        0 35px 80px
        rgba(0,0,0,.32);
}


.hw-project3-browserbar {
    display:
        flex;

    align-items:
        center;

    gap:
        6px;

    height:
        42px;

    padding:
        0 14px;

    border-bottom:
        1px solid
        rgba(255,255,255,.07);
}


.hw-project3-browserbar i {
    width:
        6px;

    height:
        6px;

    border-radius:
        50%;

    background:
        #283138;
}


.hw-project3-browserbar span {
    margin-left:
        8px;

    color:
        #59676d;

    font-size:
        9px;

    letter-spacing:
        .06em;
}


.hw-project3-screen {
    position:
        absolute;

    left:
        0;

    right:
        0;

    top:
        42px;

    bottom:
        0;

    overflow:
        hidden;

    padding:
        30px;
}


.hw-project3-lime
.hw-project3-screen {
    background:
        radial-gradient(
            circle at 82% 18%,
            rgba(168,255,0,.10),
            transparent 36%
        ),
        linear-gradient(
            140deg,
            #070d0f,
            #020607
        );
}


.hw-project3-blue
.hw-project3-screen {
    background:
        radial-gradient(
            circle at 20% 20%,
            rgba(89,199,255,.10),
            transparent 39%
        ),
        linear-gradient(
            140deg,
            #070d10,
            #020607
        );
}


.hw-project3-watermark {
    position:
        absolute;

    z-index:
        1;

    right:
        -25px;

    bottom:
        -38px;

    color:
        transparent;

    -webkit-text-stroke:
        1px
        rgba(89,199,255,.09);

    font-family:
        Arial,
        sans-serif;

    font-size:
        170px;

    font-weight:
        1000;

    line-height:
        .8;

    letter-spacing:
        -.10em;
}



/* ==========================================================
   MOCK SCREEN 01
   ========================================================== */

.hw-project3-screen-head {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;
}


.hw-project3-screen-head strong {
    color:
        #a8ff00;

    font-size:
        48px;

    letter-spacing:
        -.09em;
}


.hw-project3-screen-head span {
    color:
        #637077;

    font-size:
        8px;

    letter-spacing:
        .13em;
}


.hw-project3-shop-grid {
    display:
        grid;

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

    gap:
        10px;

    margin-top:
        34px;
}


.hw-project3-shop-grid i {
    display:
        block;

    aspect-ratio:
        1.35;

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

    background:
        linear-gradient(
            140deg,
            rgba(255,255,255,.04),
            rgba(255,255,255,.005)
        );
}


.hw-project3-screen-line {
    width:
        73%;

    height:
        1px;

    margin-top:
        25px;

    background:
        linear-gradient(
            90deg,
            #a8ff00,
            transparent
        );
}



/* ==========================================================
   BOOKING
   ========================================================== */

.hw-project3-booking-hero {
    display:
        flex;

    flex-direction:
        column;

    justify-content:
        flex-end;

    min-height:
        57%;

    padding:
        25px;

    border:
        1px solid
        rgba(89,199,255,.13);

    background:
        linear-gradient(
            145deg,
            rgba(89,199,255,.05),
            rgba(255,255,255,.005)
        );
}


.hw-project3-booking-hero small {
    color:
        #59c7ff;

    font-size:
        9px;

    letter-spacing:
        .15em;
}


.hw-project3-booking-hero strong {
    margin-top:
        5px;

    color:
        #f0f2f1;

    font-size:
        45px;

    letter-spacing:
        -.06em;
}


.hw-project3-booking-row {
    display:
        grid;

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

    gap:
        9px;

    margin-top:
        11px;
}


.hw-project3-booking-row span {
    height:
        57px;

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



/* ==========================================================
   AUTO
   ========================================================== */

.hw-project3-auto-code {
    position:
        absolute;

    left:
        32px;

    top:
        50%;

    transform:
        translateY(-50%);
}


.hw-project3-auto-code small {
    display:
        block;

    color:
        #a8ff00;

    font-size:
        9px;

    letter-spacing:
        .14em;
}


.hw-project3-auto-code strong {
    display:
        block;

    margin:
        6px 0;

    color:
        #eff2f0;

    font-size:
        58px;

    line-height:
        .9;

    letter-spacing:
        -.07em;
}


.hw-project3-auto-code span {
    color:
        #6a777d;

    font-size:
        9px;
}


.hw-project3-auto-lines {
    position:
        absolute;

    right:
        28px;

    top:
        30px;

    bottom:
        30px;

    width:
        39%;
}


.hw-project3-auto-lines i {
    display:
        block;

    height:
        1px;

    margin:
        34px 0;

    background:
        linear-gradient(
            90deg,
            rgba(168,255,0,.45),
            transparent
        );
}



/* ==========================================================
   PERFORMANCE
   ========================================================== */

.hw-project3-speed {
    display:
        grid;

    grid-template-columns:
        .55fr
        1fr;

    align-items:
        center;

    height:
        100%;

    gap:
        30px;
}


.hw-project3-speed small {
    display:
        block;

    color:
        #59c7ff;

    font-size:
        9px;

    letter-spacing:
        .14em;
}


.hw-project3-speed strong {
    color:
        #f4f6f4;

    font-size:
        100px;

    line-height:
        .9;

    letter-spacing:
        -.09em;
}


.hw-project3-speed-bars {
    display:
        grid;

    gap:
        16px;
}


.hw-project3-speed-bars i {
    display:
        block;

    height:
        7px;

    border-radius:
        999px;

    background:
        rgba(255,255,255,.055);
}


.hw-project3-speed-bars i::before {
    content:
        "";

    display:
        block;

    width:
        87%;

    height:
        100%;

    border-radius:
        inherit;

    background:
        linear-gradient(
            90deg,
            #59c7ff,
            rgba(89,199,255,.10)
        );
}


.hw-project3-speed-bars i:nth-child(2)::before {
    width:
        95%;
}


.hw-project3-speed-bars i:nth-child(3)::before {
    width:
        77%;
}


.hw-project3-speed-bars i:nth-child(4)::before {
    width:
        91%;
}



/* ==========================================================
   CORPORATE
   ========================================================== */

.hw-project3-screen-corporate {
    display:
        grid;

    grid-template-columns:
        .8fr
        1fr;

    gap:
        22px;
}


.hw-project3-corp-left {
    align-self:
        end;
}


.hw-project3-corp-left small {
    color:
        #a8ff00;

    font-size:
        9px;

    letter-spacing:
        .14em;
}


.hw-project3-corp-left strong {
    display:
        block;

    margin-top:
        8px;

    color:
        #eef1ef;

    font-size:
        63px;

    line-height:
        .75;

    letter-spacing:
        -.08em;
}


.hw-project3-corp-right {
    display:
        grid;

    gap:
        9px;
}


.hw-project3-corp-right i {
    display:
        block;

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

    background:
        linear-gradient(
            135deg,
            rgba(168,255,0,.035),
            transparent
        );
}



/* ==========================================================
   CONTENT
   ========================================================== */

.hw-project3-meta {
    display:
        grid;

    grid-template-columns:
        auto
        1fr
        auto;

    align-items:
        center;

    gap:
        14px;

    margin-bottom:
        27px;
}


.hw-project3-meta span {
    color:
        #a8ff00;

    font-size:
        11px;

    font-weight:
        900;
}


.hw-project3-blue
.hw-project3-meta span {
    color:
        #59c7ff;
}


.hw-project3-meta b {
    color:
        #68757b;

    font-size:
        10px;

    letter-spacing:
        .11em;
}


.hw-project3-meta small {
    color:
        #566269;

    font-size:
        10px;

    letter-spacing:
        .10em;
}


.hw-project3-content h2 {
    margin:
        0 0
        19px;

    color:
        #f1f3f2;

    font-size:
        clamp(
            48px,
            5vw,
            73px
        );

    line-height:
        .9;

    letter-spacing:
        -.065em;
}


.hw-project3-lead {
    margin:
        0;

    color:
        #969fa4;

    font-size:
        16px;

    line-height:
        1.68;
}


.hw-project3-work {
    display:
        grid;

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

    margin:
        27px 0;

    border-top:
        1px solid
        rgba(255,255,255,.07);

    border-left:
        1px solid
        rgba(255,255,255,.07);
}


.hw-project3-work > div {
    min-height:
        59px;

    padding:
        11px;

    border-right:
        1px solid
        rgba(255,255,255,.07);

    border-bottom:
        1px solid
        rgba(255,255,255,.07);
}


.hw-project3-work span {
    display:
        block;

    margin-bottom:
        5px;

    color:
        #5d6970;

    font-size:
        9px;
}


.hw-project3-work p {
    margin:
        0;

    color:
        #b7bfbd;

    font-size:
        12px;

    line-height:
        1.35;
}


.hw-project3-tags {
    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        6px;
}


.hw-project3-tags span {
    padding:
        6px 9px;

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

    border-radius:
        999px;

    color:
        #7b878c;

    font-size:
        9px;

    letter-spacing:
        .05em;
}


.hw-project3-live {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    margin-top:
        29px;

    padding:
        15px 0;

    border-top:
        1px solid
        rgba(255,255,255,.07);

    border-bottom:
        1px solid
        rgba(255,255,255,.07);

    color:
        #d9dedc;

    font-size:
        11px;

    font-weight:
        900;

    letter-spacing:
        .08em;
}


.hw-project3-live b {
    color:
        #a8ff00;

    font-size:
        20px;
}


.hw-project3-blue
.hw-project3-live b {
    color:
        #59c7ff;
}



/* ==========================================================
   PRINCIPLE
   ========================================================== */

.hw-projects3-principle {
    padding:
        62px 0;

    border-bottom:
        1px solid
        rgba(255,255,255,.075);
}


.hw-projects3-principle-grid {
    display:
        grid;

    grid-template-columns:
        minmax(0,1fr)
        minmax(360px,.7fr);

    gap:
        80px;

    margin-top:
        22px;
}


.hw-projects3-principle h2 {
    margin:
        0;

    color:
        #eff2f0;

    font-size:
        clamp(
            48px,
            5.5vw,
            78px
        );

    line-height:
        .93;

    letter-spacing:
        -.065em;
}


.hw-projects3-principle h2 span {
    display:
        block;

    color:
        #59c7ff;
}


.hw-projects3-principle-grid > div > p {
    margin:
        0;

    color:
        #919ba0;

    font-size:
        16px;

    line-height:
        1.7;
}


.hw-projects3-principle-list {
    display:
        grid;

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

    margin-top:
        24px;

    border-top:
        1px solid
        rgba(255,255,255,.07);

    border-left:
        1px solid
        rgba(255,255,255,.07);
}


.hw-projects3-principle-list span {
    min-height:
        46px;

    padding:
        14px;

    border-right:
        1px solid
        rgba(255,255,255,.07);

    border-bottom:
        1px solid
        rgba(255,255,255,.07);

    color:
        #758187;

    font-size:
        10px;

    font-weight:
        750;
}



/* ==========================================================
   FINAL
   ========================================================== */

.hw-projects3-final {
    display:
        grid;

    grid-template-columns:
        1fr
        minmax(350px,.45fr);

    align-items:
        end;

    gap:
        70px;

    padding:
        59px 0;
}


.hw-projects3-final h2 {
    margin:
        8px 0
        0;

    color:
        #eff2f0;

    font-size:
        clamp(
            52px,
            5.5vw,
            79px
        );

    line-height:
        .92;

    letter-spacing:
        -.065em;
}


.hw-projects3-final h2 span {
    display:
        block;

    color:
        #a8ff00;
}


.hw-projects3-final p {
    margin:
        0 0
        20px;

    color:
        #929ca1;

    font-size:
        15px;

    line-height:
        1.65;
}


.hw-projects3-final a {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    min-height:
        55px;

    padding:
        0 20px;

    border-radius:
        999px;

    background:
        #a8ff00;

    color:
        #040604;

    font-size:
        11px;

    font-weight:
        950;

    letter-spacing:
        .07em;
}


.hw-projects3-final a b {
    font-size:
        21px;

    font-weight:
        400;
}



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

@media (max-width: 1000px) {

    .hw-projects3 {
        width:
            min(
                760px,
                calc(100% - 30px)
            );
    }


    .hw-projects3-hero-grid,
    .hw-projects3-principle-grid,
    .hw-projects3-final {
        grid-template-columns:
            1fr;
    }


    .hw-project3 {
        grid-template-columns:
            1fr;

        gap:
            35px;
    }


    .hw-project3-reverse
    .hw-project3-visual,
    .hw-project3-reverse
    .hw-project3-content {
        order:
            initial;
    }

}



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

@media (max-width: 650px) {

    .hw-projects3 {
        width:
            calc(100% - 20px);

        padding:
            27px 0
            55px;
    }


    .hw-projects3-hero {
        padding:
            25px 0
            39px;
    }


    .hw-projects3-kicker {
        font-size:
            9px;
    }


    .hw-projects3-kicker > b {
        display:
            none;
    }


    .hw-projects3-hero-grid {
        gap:
            26px;

        margin-top:
            27px;
    }


    .hw-projects3 h1 {
        font-size:
            clamp(
                56px,
                17vw,
                76px
            );
    }


    .hw-projects3-hero-copy p {
        font-size:
            15px;
    }


    .hw-projects3-stats {
        grid-template-columns:
            repeat(
                2,
                1fr
            );

        margin-top:
            33px;
    }


    .hw-projects3-stats > div {
        min-height:
            80px;

        padding:
            15px;
    }


    .hw-projects3-stats span {
        font-size:
            22px;
    }


    .hw-projects3-stats small {
        font-size:
            9px;
    }


    .hw-project3 {
        gap:
            28px;

        padding:
            44px 0;
    }


    .hw-project3-browser {
        border-radius:
            13px;
    }


    .hw-project3-browserbar {
        height:
            36px;
    }


    .hw-project3-screen {
        top:
            36px;

        padding:
            20px;
    }


    .hw-project3-content h2 {
        font-size:
            48px;
    }


    .hw-project3-lead {
        font-size:
            15px;
    }


    .hw-project3-meta {
        margin-bottom:
            20px;
    }


    .hw-project3-meta span,
    .hw-project3-meta b,
    .hw-project3-meta small {
        font-size:
            9px;
    }


    .hw-project3-work {
        margin:
            23px 0;
    }


    .hw-project3-work p {
        font-size:
            11px;
    }


    .hw-project3-tags span {
        font-size:
            9px;
    }


    .hw-project3-live {
        font-size:
            11px;
    }


    .hw-project3-watermark {
        font-size:
            110px;
    }


    .hw-project3-screen-head strong {
        font-size:
            35px;
    }


    .hw-project3-booking-hero strong {
        font-size:
            32px;
    }


    .hw-project3-auto-code strong {
        font-size:
            38px;
    }


    .hw-project3-speed strong {
        font-size:
            62px;
    }


    .hw-project3-corp-left strong {
        font-size:
            41px;
    }


    .hw-projects3-principle {
        padding:
            44px 0;
    }


    .hw-projects3-principle-grid {
        gap:
            27px;
    }


    .hw-projects3-principle h2 {
        font-size:
            46px;
    }


    .hw-projects3-principle-grid > div > p {
        font-size:
            15px;
    }


    .hw-projects3-principle-list span {
        font-size:
            9px;
    }


    .hw-projects3-final {
        gap:
            25px;

        padding:
            44px 0;
    }


    .hw-projects3-final h2 {
        font-size:
            47px;
    }


    .hw-projects3-final p {
        font-size:
            15px;
    }

}


/* ==========================================================
   END PROJECTS V3
   ========================================================== */




/* HACKER_WEB_PROJECTS_LIVE_CSS_V1 */


/* ==========================================================
   LIVE SECTION
   ========================================================== */

.hw-projects-live-section {
    padding:
        22px 0
        0;
}


.hw-projects-live-head {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    min-height:
        52px;

    border-bottom:
        1px solid
        rgba(255,255,255,.07);
}


.hw-projects-live-head span,
.hw-projects-live-head b {
    font-size:
        10px;

    line-height:
        1.3;

    font-weight:
        850;

    letter-spacing:
        .13em;
}


.hw-projects-live-head span {
    color:
        #66747a;
}


.hw-projects-live-head b {
    color:
        #a8ff00;
}



/* ==========================================================
   LOADING
   ========================================================== */

.hw-project-live-loading {
    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    min-height:
        180px;

    color:
        #657278;

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        .12em;
}


.hw-project-live-loading span {
    width:
        7px;

    height:
        7px;

    border-radius:
        50%;

    background:
        #a8ff00;

    box-shadow:
        0 0 12px
        rgba(168,255,0,.55);
}



/* ==========================================================
   REAL PROJECT CARD
   ========================================================== */

.hw-project-live {
    display:
        grid;

    grid-template-columns:
        minmax(0,1.14fr)
        minmax(390px,.76fr);

    align-items:
        center;

    gap:
        62px;

    padding:
        70px 0;

    border-bottom:
        1px solid
        rgba(255,255,255,.075);
}


.hw-project-live.is-reverse
.hw-project-live-visual {
    order:
        2;
}


.hw-project-live.is-reverse
.hw-project-live-content {
    order:
        1;
}



/* ==========================================================
   SCREENSHOT
   ========================================================== */

.hw-project-live-visual {
    position:
        relative;

    min-width:
        0;
}


.hw-project-live-shot {
    display:
        block;

    color:
        inherit;
}


.hw-project-live-browser {
    position:
        relative;

    overflow:
        hidden;

    aspect-ratio:
        16 / 10;

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

    border-radius:
        18px;

    background:
        #030709;

    box-shadow:
        0 32px 85px
        rgba(0,0,0,.34);
}


.hw-project-live.is-lime
.hw-project-live-browser {
    box-shadow:
        0 32px 85px
        rgba(0,0,0,.34),
        30px 0 80px
        rgba(168,255,0,.025);
}


.hw-project-live.is-blue
.hw-project-live-browser {
    box-shadow:
        0 32px 85px
        rgba(0,0,0,.34),
        -30px 0 80px
        rgba(89,199,255,.025);
}


.hw-project-live-browserbar {
    display:
        flex;

    align-items:
        center;

    gap:
        6px;

    height:
        42px;

    padding:
        0 14px;

    border-bottom:
        1px solid
        rgba(255,255,255,.07);

    background:
        #060b0e;
}


.hw-project-live-browserbar i {
    display:
        block;

    width:
        6px;

    height:
        6px;

    border-radius:
        50%;

    background:
        #283239;
}


.hw-project-live-browserbar span {
    margin-left:
        8px;

    overflow:
        hidden;

    color:
        #6f7b81;

    font-size:
        10px;

    line-height:
        1;

    white-space:
        nowrap;

    text-overflow:
        ellipsis;
}


.hw-project-live-image {
    position:
        absolute;

    left:
        0;

    right:
        0;

    top:
        42px;

    bottom:
        0;

    overflow:
        hidden;

    background:
        #050a0c;
}


.hw-project-live-image img {
    display:
        block;

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    object-position:
        top center;

    transition:
        transform .45s ease;
}


.hw-project-live-shot:hover
.hw-project-live-image img {
    transform:
        scale(1.015);
}


.hw-project-live-image::after {
    content:
        "";

    position:
        absolute;

    inset:
        0;

    pointer-events:
        none;

    box-shadow:
        inset 0 0 50px
        rgba(0,0,0,.12);
}



/* ==========================================================
   FALLBACK WHEN BOT HAS NO SCREENSHOT YET
   ========================================================== */

.hw-project-live-image.is-placeholder {
    display:
        flex;

    flex-direction:
        column;

    justify-content:
        flex-end;

    padding:
        32px;

    background:
        radial-gradient(
            circle at 80% 20%,
            rgba(168,255,0,.08),
            transparent 38%
        ),
        #05090b;
}


.hw-project-live.is-blue
.hw-project-live-image.is-placeholder {
    background:
        radial-gradient(
            circle at 20% 20%,
            rgba(89,199,255,.09),
            transparent 38%
        ),
        #05090b;
}


.hw-project-live-image.is-placeholder strong {
    color:
        #eff2f0;

    font-size:
        clamp(
            52px,
            7vw,
            92px
        );

    line-height:
        .80;

    letter-spacing:
        -.09em;
}


.hw-project-live-image.is-placeholder small {
    margin-top:
        15px;

    color:
        #68757b;

    font-size:
        11px;

    letter-spacing:
        .08em;
}



/* ==========================================================
   OPTIONAL MOBILE SCREENSHOT
   ========================================================== */

.hw-project-live-phone {
    position:
        absolute;

    z-index:
        4;

    right:
        -18px;

    bottom:
        -25px;

    width:
        20%;

    min-width:
        105px;

    overflow:
        hidden;

    aspect-ratio:
        9 / 18;

    border:
        5px solid
        #070c0f;

    border-radius:
        20px;

    background:
        #030607;

    box-shadow:
        0 20px 50px
        rgba(0,0,0,.50);
}


.hw-project-live-phone img {
    display:
        block;

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    object-position:
        top center;
}



/* ==========================================================
   PROJECT CONTENT
   ========================================================== */

.hw-project-live-meta {
    display:
        grid;

    grid-template-columns:
        auto
        1fr
        auto;

    align-items:
        center;

    gap:
        14px;

    margin-bottom:
        25px;
}


.hw-project-live-meta span,
.hw-project-live-meta b,
.hw-project-live-meta small {
    font-size:
        11px;

    line-height:
        1.3;

    font-weight:
        850;

    letter-spacing:
        .10em;
}


.hw-project-live-meta span {
    color:
        #a8ff00;
}


.hw-project-live.is-blue
.hw-project-live-meta span {
    color:
        #59c7ff;
}


.hw-project-live-meta b {
    overflow:
        hidden;

    color:
        #69767c;

    white-space:
        nowrap;

    text-overflow:
        ellipsis;
}


.hw-project-live-meta small {
    color:
        #56636a;
}


.hw-project-live-content h2 {
    margin:
        0 0
        18px;

    color:
        #f1f3f2;

    font-size:
        clamp(
            49px,
            5vw,
            74px
        );

    line-height:
        .90;

    font-weight:
        950;

    letter-spacing:
        -.065em;
}


.hw-project-live-description {
    margin:
        0;

    color:
        #9aa4a8;

    font-size:
        17px;

    line-height:
        1.70;
}



/* ==========================================================
   WORK
   ========================================================== */

.hw-project-live-work {
    display:
        grid;

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

    margin:
        27px 0;

    border-top:
        1px solid
        rgba(255,255,255,.075);

    border-left:
        1px solid
        rgba(255,255,255,.075);
}


.hw-project-live-work > div {
    min-height:
        65px;

    padding:
        12px;

    border-right:
        1px solid
        rgba(255,255,255,.075);

    border-bottom:
        1px solid
        rgba(255,255,255,.075);
}


.hw-project-live-work span {
    display:
        block;

    margin-bottom:
        5px;

    color:
        #617078;

    font-size:
        10px;

    font-weight:
        800;
}


.hw-project-live-work p {
    margin:
        0;

    color:
        #c0c6c4;

    font-size:
        13px;

    line-height:
        1.4;
}



/* ==========================================================
   TAGS
   ========================================================== */

.hw-project-live-tags {
    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        6px;
}


.hw-project-live-tags span {
    padding:
        6px 9px;

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

    border-radius:
        999px;

    color:
        #7f8a8f;

    font-size:
        10px;

    line-height:
        1.2;

    font-weight:
        700;
}



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

.hw-project-live-link {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    margin-top:
        29px;

    padding:
        16px 0;

    border-top:
        1px solid
        rgba(255,255,255,.075);

    border-bottom:
        1px solid
        rgba(255,255,255,.075);

    color:
        #dfe3e1;

    font-size:
        12px;

    font-weight:
        900;

    letter-spacing:
        .075em;
}


.hw-project-live-link b {
    color:
        #a8ff00;

    font-size:
        21px;

    font-weight:
        400;
}


.hw-project-live.is-blue
.hw-project-live-link b {
    color:
        #59c7ff;
}



/* ==========================================================
   EMPTY / ERROR
   ========================================================== */

.hw-project-live-empty {
    padding:
        70px 0;

    border-bottom:
        1px solid
        rgba(255,255,255,.07);
}


.hw-project-live-empty strong {
    display:
        block;

    margin-bottom:
        10px;

    color:
        #59c7ff;

    font-size:
        12px;

    letter-spacing:
        .10em;
}


.hw-project-live-empty p {
    margin:
        0;

    color:
        #8a959a;

    font-size:
        15px;
}



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

@media (max-width: 1000px) {

    .hw-project-live {
        grid-template-columns:
            1fr;

        gap:
            36px;
    }


    .hw-project-live.is-reverse
    .hw-project-live-visual,
    .hw-project-live.is-reverse
    .hw-project-live-content {
        order:
            initial;
    }

}



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

@media (max-width: 650px) {

    .hw-projects-live-head {
        min-height:
            46px;
    }


    .hw-projects-live-head span,
    .hw-projects-live-head b {
        font-size:
            9px;
    }


    .hw-project-live {
        gap:
            26px;

        padding:
            43px 0;
    }


    .hw-project-live-browser {
        border-radius:
            13px;
    }


    .hw-project-live-browserbar {
        height:
            36px;

        padding:
            0 11px;
    }


    .hw-project-live-browserbar span {
        font-size:
            9px;
    }


    .hw-project-live-image {
        top:
            36px;
    }


    .hw-project-live-phone {
        display:
            none;
    }


    .hw-project-live-meta {
        margin-bottom:
            18px;
    }


    .hw-project-live-meta span,
    .hw-project-live-meta b,
    .hw-project-live-meta small {
        font-size:
            9px;
    }


    .hw-project-live-content h2 {
        font-size:
            47px;
    }


    .hw-project-live-description {
        font-size:
            15px;

        line-height:
            1.65;
    }


    .hw-project-live-work {
        margin:
            22px 0;
    }


    .hw-project-live-work > div {
        min-height:
            59px;

        padding:
            10px;
    }


    .hw-project-live-work p {
        font-size:
            12px;
    }


    .hw-project-live-tags span {
        font-size:
            9px;
    }


    .hw-project-live-link {
        font-size:
            11px;
    }

}


/* /HACKER_WEB_PROJECTS_LIVE_CSS_V1 */




/* HACKER_WEB_PROJECTS_GLOBAL_TYPO_V2 */


/* ==========================================================
   HERO / COMMON LABELS
   ========================================================== */

.hw-projects3-label {
    font-size:
        13px !important;

    line-height:
        1.35 !important;

    letter-spacing:
        .13em !important;
}


.hw-projects3-kicker {
    font-size:
        13px !important;

    line-height:
        1.4 !important;
}


.hw-projects3-kicker > b {
    font-size:
        12px !important;
}


.hw-projects3-hero-copy p {
    font-size:
        18px !important;

    line-height:
        1.70 !important;

    color:
        #a1aaae !important;
}


.hw-projects3-hero-copy a {
    font-size:
        13px !important;
}


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

.hw-projects3-stats small {
    font-size:
        12px !important;

    line-height:
        1.35 !important;
}


.hw-projects3-stats span {
    font-size:
        28px !important;
}


/* ==========================================================
   PROJECT META
   05 / E-COMMERCE / LIVE
   ========================================================== */

.hw-project-live-meta {
    margin-bottom:
        27px !important;
}


.hw-project-live-meta span,
.hw-project-live-meta b,
.hw-project-live-meta small {
    font-size:
        14px !important;

    line-height:
        1.35 !important;

    letter-spacing:
        .08em !important;
}


.hw-project-live-meta span {
    font-weight:
        950 !important;
}


.hw-project-live-meta b {
    color:
        #889399 !important;

    font-weight:
        800 !important;
}


.hw-project-live-meta small {
    color:
        #758187 !important;

    font-weight:
        800 !important;
}


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

.hw-project-live-content h2 {
    font-size:
        clamp(
            55px,
            5.4vw,
            80px
        ) !important;
}


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

.hw-project-live-description {
    font-size:
        18px !important;

    line-height:
        1.70 !important;

    color:
        #a8b0b3 !important;
}


/* ==========================================================
   WORK / SERVICES GRID
   ========================================================== */

.hw-project-live-work {
    margin:
        29px 0 !important;
}


.hw-project-live-work > div {
    min-height:
        76px !important;

    padding:
        14px !important;
}


.hw-project-live-work span {
    margin-bottom:
        7px !important;

    font-size:
        12px !important;

    line-height:
        1.3 !important;

    font-weight:
        850 !important;

    color:
        #78858b !important;
}


.hw-project-live-work p {
    font-size:
        16px !important;

    line-height:
        1.45 !important;

    color:
        #d0d5d3 !important;
}


/* ==========================================================
   TECHNOLOGY TAGS
   ========================================================== */

.hw-project-live-tags {
    gap:
        8px !important;
}


.hw-project-live-tags span {
    padding:
        8px 11px !important;

    font-size:
        12px !important;

    line-height:
        1.2 !important;

    font-weight:
        750 !important;

    color:
        #98a2a6 !important;
}


/* ==========================================================
   VIEW LIVE
   ========================================================== */

.hw-project-live-link {
    margin-top:
        31px !important;

    padding:
        18px 0 !important;

    font-size:
        14px !important;

    line-height:
        1.3 !important;

    letter-spacing:
        .065em !important;
}


.hw-project-live-link b {
    font-size:
        24px !important;
}


/* ==========================================================
   BROWSER BAR
   ========================================================== */

.hw-project-live-browserbar span {
    font-size:
        12px !important;

    line-height:
        1.3 !important;
}


/* ==========================================================
   PLACEHOLDER
   ========================================================== */

.hw-project-live-image.is-placeholder small {
    font-size:
        13px !important;
}


/* ==========================================================
   LIVE SECTION HEADER
   ========================================================== */

.hw-projects-live-head span,
.hw-projects-live-head b {
    font-size:
        12px !important;

    line-height:
        1.35 !important;
}


/* ==========================================================
   APPROACH SECTION
   ========================================================== */

.hw-projects3-principle-grid > div > p {
    font-size:
        18px !important;

    line-height:
        1.70 !important;

    color:
        #a0aaae !important;
}


.hw-projects3-principle-list span {
    min-height:
        52px !important;

    font-size:
        12px !important;

    line-height:
        1.35 !important;
}


/* ==========================================================
   FINAL CTA
   ========================================================== */

.hw-projects3-final p {
    font-size:
        17px !important;

    line-height:
        1.68 !important;

    color:
        #9da6aa !important;
}


.hw-projects3-final a {
    font-size:
        13px !important;
}


/* ==========================================================
   EMPTY / ERROR
   ========================================================== */

.hw-project-live-empty strong {
    font-size:
        14px !important;
}


.hw-project-live-empty p {
    font-size:
        17px !important;
}


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

@media (max-width: 650px) {

    .hw-projects3-label,
    .hw-projects3-kicker {
        font-size:
            11px !important;
    }


    .hw-projects3-hero-copy p {
        font-size:
            16px !important;

        line-height:
            1.65 !important;
    }


    .hw-projects3-stats small {
        font-size:
            10px !important;
    }


    /*
     * META ON MOBILE
     */

    .hw-project-live-meta {
        gap:
            10px !important;

        margin-bottom:
            19px !important;
    }


    .hw-project-live-meta span,
    .hw-project-live-meta b,
    .hw-project-live-meta small {
        font-size:
            11px !important;

        line-height:
            1.35 !important;
    }


    /*
     * TITLE
     */

    .hw-project-live-content h2 {
        font-size:
            50px !important;
    }


    /*
     * DESCRIPTION
     */

    .hw-project-live-description {
        font-size:
            16px !important;

        line-height:
            1.65 !important;
    }


    /*
     * WORK GRID
     */

    .hw-project-live-work > div {
        min-height:
            68px !important;

        padding:
            11px !important;
    }


    .hw-project-live-work span {
        font-size:
            10px !important;
    }


    .hw-project-live-work p {
        font-size:
            14px !important;

        line-height:
            1.45 !important;
    }


    /*
     * TAGS
     */

    .hw-project-live-tags {
        gap:
            6px !important;
    }


    .hw-project-live-tags span {
        padding:
            7px 9px !important;

        font-size:
            10px !important;
    }


    /*
     * VIEW LIVE
     */

    .hw-project-live-link {
        padding:
            16px 0 !important;

        font-size:
            12px !important;
    }


    .hw-project-live-link b {
        font-size:
            21px !important;
    }


    /*
     * BROWSER URL
     */

    .hw-project-live-browserbar span {
        font-size:
            10px !important;
    }


    /*
     * APPROACH
     */

    .hw-projects3-principle-grid > div > p {
        font-size:
            16px !important;
    }


    .hw-projects3-principle-list span {
        font-size:
            10px !important;
    }


    /*
     * FINAL
     */

    .hw-projects3-final p {
        font-size:
            16px !important;
    }


    .hw-projects3-final a {
        font-size:
            11px !important;
    }

}


/* /HACKER_WEB_PROJECTS_GLOBAL_TYPO_V2 */




/* HACKER_WEB_PROJECT_TITLE_SMALLER_V3 */

/* Project names: APH Tehnik, Avangard Store, etc. */
.hw-project-live-content h2 {
    font-size:
        clamp(
            32px,
            3.1vw,
            46px
        ) !important;

    line-height:
        .98 !important;

    letter-spacing:
        -.045em !important;
}

/* Mobile */
@media (max-width: 650px) {

    .hw-project-live-content h2 {
        font-size:
            34px !important;

        line-height:
            1 !important;
    }

}

/* /HACKER_WEB_PROJECT_TITLE_SMALLER_V3 */









/* HACKER_WEB_PROJECTS_EQUAL_VISUAL_V2 */


/* ==========================================================
   DESKTOP
   Normal row:
   IMAGE = 1.14fr
   TEXT  = .76fr

   Reverse row:
   TEXT  = .76fr
   IMAGE = 1.14fr

   Therefore screenshots are SAME SIZE
   on left and right.
   ========================================================== */

@media (min-width: 1001px) {

    .hw-project-live {
        grid-template-columns:
            minmax(0, 1.14fr)
            minmax(390px, .76fr)
            !important;
    }


    .hw-project-live.is-reverse {
        grid-template-columns:
            minmax(390px, .76fr)
            minmax(0, 1.14fr)
            !important;
    }


    /* visual always fills its large column */

    .hw-project-live-visual {
        width:
            100% !important;

        max-width:
            none !important;

        min-width:
            0 !important;
    }


    .hw-project-live-shot {
        display:
            block !important;

        width:
            100% !important;
    }


    .hw-project-live-browser {
        width:
            100% !important;

        max-width:
            none !important;

        aspect-ratio:
            16 / 10 !important;
    }


    .hw-project-live-image {
        width:
            auto !important;
    }


    .hw-project-live-image img {
        width:
            100% !important;

        height:
            100% !important;

        object-fit:
            cover !important;

        object-position:
            top center !important;
    }

}


/* ==========================================================
   TABLET / MOBILE
   Already one column — don't change that behavior.
   ========================================================== */

@media (max-width: 1000px) {

    .hw-project-live,
    .hw-project-live.is-reverse {
        grid-template-columns:
            1fr !important;
    }

}


/* /HACKER_WEB_PROJECTS_EQUAL_VISUAL_V2 */


/* =========================================================
   HACKER WEB
   PROJECT ACTION BUTTONS V4
   equal / rounded / gold + blue
   ========================================================= */

.hw-project-live-actions-v2 {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    margin-top: 26px !important;
}

.hw-project-live-actions-v2
.hw-project-live-link,
.hw-project-live-actions-v2
.hw-project-case-link {
    box-sizing: border-box !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    gap: 14px !important;

    width: auto !important;
    min-width: 138px !important;
    height: 56px !important;
    min-height: 56px !important;

    margin: 0 !important;
    padding: 0 22px !important;

    border-radius: 999px !important;

    font-size: 14px !important;
    font-weight: 850 !important;
    line-height: 1 !important;
    letter-spacing: .065em !important;

    text-decoration: none !important;

    transition:
        transform .22s ease,
        border-color .22s ease,
        background .22s ease,
        box-shadow .22s ease !important;
}


/* VIEW LIVE — GOLD */

.hw-project-live-actions-v2
.hw-project-live-link {
    color: #fff !important;

    border:
        1px solid rgba(255, 196, 72, .72) !important;

    background:
        linear-gradient(
            180deg,
            rgba(126, 88, 14, .18),
            rgba(42, 28, 4, .10)
        ) !important;

    box-shadow:
        0 0 18px rgba(255, 190, 50, .12),
        inset 0 0 0 1px rgba(255, 219, 135, .025) !important;
}

.hw-project-live-actions-v2
.hw-project-live-link:hover {
    transform:
        translateY(-2px) !important;

    border-color:
        rgba(255, 210, 90, .98) !important;

    background:
        linear-gradient(
            180deg,
            rgba(160, 111, 16, .24),
            rgba(52, 34, 4, .14)
        ) !important;

    box-shadow:
        0 0 24px rgba(255, 190, 50, .25),
        0 0 55px rgba(255, 176, 25, .10) !important;
}


/* arrow / icon inside VIEW LIVE */

.hw-project-live-actions-v2
.hw-project-live-link span:last-child,
.hw-project-live-actions-v2
.hw-project-live-link::after {
    color: #ffd04f !important;
}


/* VIEW CASE — BLUE */

.hw-project-live-actions-v2
.hw-project-case-link {
    color: #fff !important;

    border:
        1px solid rgba(68, 156, 255, .72) !important;

    background:
        linear-gradient(
            180deg,
            rgba(31, 89, 151, .16),
            rgba(10, 30, 52, .08)
        ) !important;

    box-shadow:
        0 0 18px rgba(61, 149, 255, .13),
        inset 0 0 0 1px rgba(126, 190, 255, .02) !important;
}

.hw-project-live-actions-v2
.hw-project-case-link:hover {
    transform:
        translateY(-2px) !important;

    border-color:
        rgba(91, 179, 255, .98) !important;

    background:
        linear-gradient(
            180deg,
            rgba(41, 113, 191, .22),
            rgba(12, 39, 68, .12)
        ) !important;

    box-shadow:
        0 0 25px rgba(61, 149, 255, .24),
        0 0 55px rgba(61, 149, 255, .10) !important;
}


/* Make both labels visually aligned */

.hw-project-live-actions-v2
.hw-project-live-link > *,
.hw-project-live-actions-v2
.hw-project-case-link > * {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
}


/* MOBILE */

@media (max-width: 600px) {

    .hw-project-live-actions-v2 {
        display: grid !important;
        grid-template-columns:
            1fr 1fr !important;

        gap: 10px !important;
        width: 100% !important;
    }

    .hw-project-live-actions-v2
    .hw-project-live-link,
    .hw-project-live-actions-v2
    .hw-project-case-link {
        width: 100% !important;
        min-width: 0 !important;
        height: 52px !important;
        min-height: 52px !important;

        padding:
            0 16px !important;

        font-size:
            12px !important;
    }

}


/* HACKER_WEB_PROJECTS_HERO_LAYOUT_V1 */

/*
 * HACKER WEB / PROJECTS
 *
 * Desktop:
 *  LEFT  = title + copy + CTA
 *  RIGHT = visual directly below
 *          "01 / PORTFOLIO"
 *
 * Image fades naturally from its own
 * left edge into the black background.
 */

@media (min-width: 901px) {

    .hw-projects3 .hw-projects3-hero-grid {

        display:
            grid !important;

        grid-template-columns:
            minmax(0, 1.06fr)
            minmax(430px, .94fr) !important;

        grid-template-rows:
            auto
            auto !important;

        align-items:
            start !important;

        column-gap:
            clamp(46px, 5vw, 90px) !important;

        row-gap:
            26px !important;

    }


    /*
     * TITLE
     */

    .hw-projects3
    .hw-projects3-hero-grid
    > div:first-child {

        grid-column:
            1 !important;

        grid-row:
            1 !important;

        min-width:
            0 !important;

    }


    /*
     * TEXT + CTA
     * moves underneath title.
     */

    .hw-projects3
    .hw-projects3-hero-copy {

        grid-column:
            1 !important;

        grid-row:
            2 !important;

        align-self:
            start !important;

        width:
            100% !important;

        max-width:
            680px !important;

        margin:
            0 !important;

        padding:
            0 !important;

    }


    .hw-projects3
    .hw-projects3-hero-copy p {

        width:
            100% !important;

        max-width:
            650px !important;

        margin:
            0 0 26px !important;

    }


    .hw-projects3
    .hw-projects3-hero-copy > a {

        width:
            min(100%, 470px) !important;

        margin:
            0 !important;

    }


    /*
     * RIGHT VISUAL
     */

    .hw-projects3
    .hw-projects3-hero-media {

        grid-column:
            2 !important;

        grid-row:
            1 / span 2 !important;

        align-self:
            start !important;

        justify-self:
            end !important;

        position:
            relative !important;

        display:
            flex !important;

        align-items:
            flex-start !important;

        justify-content:
            flex-end !important;

        width:
            100% !important;

        min-width:
            0 !important;

        margin:
            -12px 0 0 !important;

        overflow:
            visible !important;

        pointer-events:
            none !important;

    }


    /*
     * IMPORTANT:
     * fade starts from the actual LEFT EDGE
     * of the image.
     *
     * No black overlay rectangle.
     * No hard vertical cut.
     */

    .hw-projects3
    .hw-projects3-hero-media img {

        display:
            block !important;

        width:
            min(116%, 760px) !important;

        max-width:
            760px !important;

        height:
            auto !important;

        object-fit:
            contain !important;


        -webkit-mask-image:
            linear-gradient(
                90deg,

                rgba(0,0,0,0) 0%,

                rgba(0,0,0,.03) 3%,

                rgba(0,0,0,.10) 7%,

                rgba(0,0,0,.22) 11%,

                rgba(0,0,0,.40) 16%,

                rgba(0,0,0,.60) 21%,

                rgba(0,0,0,.78) 26%,

                rgba(0,0,0,.91) 31%,

                rgba(0,0,0,.98) 36%,

                rgba(0,0,0,1) 41%,

                rgba(0,0,0,1) 100%
            ) !important;


        mask-image:
            linear-gradient(
                90deg,

                rgba(0,0,0,0) 0%,

                rgba(0,0,0,.03) 3%,

                rgba(0,0,0,.10) 7%,

                rgba(0,0,0,.22) 11%,

                rgba(0,0,0,.40) 16%,

                rgba(0,0,0,.60) 21%,

                rgba(0,0,0,.78) 26%,

                rgba(0,0,0,.91) 31%,

                rgba(0,0,0,.98) 36%,

                rgba(0,0,0,1) 41%,

                rgba(0,0,0,1) 100%
            ) !important;


        -webkit-mask-size:
            100% 100% !important;

        mask-size:
            100% 100% !important;


        -webkit-mask-repeat:
            no-repeat !important;

        mask-repeat:
            no-repeat !important;


        transform:
            translate(-24px, 2px)
            scale(1.08) !important;

        transform-origin:
            center center !important;


        filter:
            drop-shadow(
                0 30px 70px
                rgba(0,0,0,.30)
            )
            drop-shadow(
                0 16px 44px
                rgba(168,255,0,.045)
            ) !important;

    }

}


/*
 * MEDIUM DESKTOP
 */

@media
(min-width: 901px)
and
(max-width: 1180px) {

    .hw-projects3
    .hw-projects3-hero-grid {

        grid-template-columns:
            minmax(0, 1fr)
            minmax(360px, .90fr) !important;

        column-gap:
            36px !important;

    }


    .hw-projects3
    .hw-projects3-hero-media img {

        width:
            min(110%, 660px) !important;

        max-width:
            660px !important;

        transform:
            translate(-12px, 5px)
            scale(1.04) !important;

    }

}


/*
 * TABLET / MOBILE
 */

@media (max-width: 900px) {

    .hw-projects3
    .hw-projects3-hero-grid {

        display:
            grid !important;

        grid-template-columns:
            1fr !important;

        grid-template-rows:
            auto
            auto
            auto !important;

        row-gap:
            24px !important;

    }


    .hw-projects3
    .hw-projects3-hero-grid
    > div:first-child {

        grid-column:
            1 !important;

        grid-row:
            1 !important;

    }


    .hw-projects3
    .hw-projects3-hero-copy {

        grid-column:
            1 !important;

        grid-row:
            2 !important;

        width:
            100% !important;

        max-width:
            none !important;

        margin:
            0 !important;

    }


    .hw-projects3
    .hw-projects3-hero-media {

        grid-column:
            1 !important;

        grid-row:
            3 !important;

        display:
            flex !important;

        justify-content:
            center !important;

        width:
            100% !important;

        margin:
            2px 0 0 !important;

        overflow:
            visible !important;

    }


    .hw-projects3
    .hw-projects3-hero-media img {

        display:
            block !important;

        width:
            min(108%, 720px) !important;

        max-width:
            108% !important;

        height:
            auto !important;


        -webkit-mask-image:
            linear-gradient(
                90deg,
                rgba(0,0,0,0) 0%,
                rgba(0,0,0,.20) 7%,
                rgba(0,0,0,.48) 14%,
                rgba(0,0,0,.78) 21%,
                rgba(0,0,0,.96) 28%,
                #000 34%,
                #000 100%
            ) !important;


        mask-image:
            linear-gradient(
                90deg,
                rgba(0,0,0,0) 0%,
                rgba(0,0,0,.20) 7%,
                rgba(0,0,0,.48) 14%,
                rgba(0,0,0,.78) 21%,
                rgba(0,0,0,.96) 28%,
                #000 34%,
                #000 100%
            ) !important;


        -webkit-mask-size:
            100% 100% !important;

        mask-size:
            100% 100% !important;

        transform:
            none !important;

    }

}


/*
 * Small mobile.
 */

@media (max-width: 560px) {

    .hw-projects3
    .hw-projects3-hero-media img {

        width:
            114% !important;

        max-width:
            114% !important;

        transform:
            translateX(-2%) !important;

    }

}

/* /HACKER_WEB_PROJECTS_HERO_LAYOUT_V1 */