/* HACKER_WEB_ABOUT_COMPACT_V2 */

/*
 * ABOUT HERO
 * Compact height + correct image ratio
 */

@media (min-width: 901px) {

    .hw-about2 .hw-about2-hero {

        grid-template-columns:
            minmax(0, 1.05fr)
            minmax(390px, .95fr) !important;

        column-gap:
            clamp(34px, 4vw, 68px) !important;

        row-gap:
            18px !important;

        min-height:
            500px !important;

        padding-top:
            20px !important;

        padding-bottom:
            34px !important;

        align-items:
            center !important;
    }


    /*
     * TITLE
     */

    .hw-about2
    .hw-about2-hero
    > div:first-child {

        align-self:
            center !important;

        margin:
            0 !important;
    }


    /*
     * COPY UNDER TITLE
     */

    .hw-about2
    .hw-about2-hero-copy {

        align-self:
            start !important;

        max-width:
            620px !important;

        margin:
            -4px 0 0 !important;

        padding:
            0 !important;
    }


    .hw-about2
    .hw-about2-hero-copy p {

        max-width:
            610px !important;

        margin:
            0 0 20px !important;

        font-size:
            15px !important;

        line-height:
            1.58 !important;
    }


    /*
     * CTA SMALLER
     */

    .hw-about2
    .hw-about2-hero-cta {

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

        min-height:
            50px !important;

        padding:
            0 20px !important;

        margin:
            0 !important;
    }


    /*
     * RIGHT IMAGE COLUMN
     */

    .hw-about2
    .hw-about2-hero-media {

        align-self:
            center !important;

        justify-self:
            end !important;

        width:
            100% !important;

        max-height:
            500px !important;

        margin:
            0 !important;

        overflow:
            visible !important;
    }


    /*
     * 03 / ABOUT
     */

    .hw-about2
    .hw-about2-hero-index {

        margin:
            0 8px 6px 0 !important;
    }


    /*
     * IMAGE
     * Important:
     * NO stretching.
     */

    .hw-about2
    .hw-about2-hero-media img {

        display:
            block !important;

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

        max-width:
            570px !important;

        height:
            auto !important;

        max-height:
            445px !important;

        aspect-ratio:
            auto !important;

        object-fit:
            contain !important;

        justify-self:
            end !important;

        transform:
            none !important;

        transform-origin:
            center center !important;


        /*
         * Smooth reveal from actual left edge.
         */

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

                transparent 0%,

                rgba(0,0,0,.05) 4%,

                rgba(0,0,0,.14) 8%,

                rgba(0,0,0,.28) 13%,

                rgba(0,0,0,.46) 18%,

                rgba(0,0,0,.66) 23%,

                rgba(0,0,0,.82) 28%,

                rgba(0,0,0,.93) 33%,

                rgba(0,0,0,.99) 38%,

                #000 43%,

                #000 100%
            ) !important;


        mask-image:
            linear-gradient(
                90deg,

                transparent 0%,

                rgba(0,0,0,.05) 4%,

                rgba(0,0,0,.14) 8%,

                rgba(0,0,0,.28) 13%,

                rgba(0,0,0,.46) 18%,

                rgba(0,0,0,.66) 23%,

                rgba(0,0,0,.82) 28%,

                rgba(0,0,0,.93) 33%,

                rgba(0,0,0,.99) 38%,

                #000 43%,

                #000 100%
            ) !important;


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

        mask-repeat:
            no-repeat !important;


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

        mask-size:
            100% 100% !important;


        filter:
            drop-shadow(
                0 20px 52px
                rgba(0,0,0,.24)
            ) !important;
    }

}


/*
 * Medium screens
 */

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

    .hw-about2 .hw-about2-hero {

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

        min-height:
            470px !important;

        column-gap:
            28px !important;
    }


    .hw-about2
    .hw-about2-hero-media img {

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

        max-width:
            510px !important;

        max-height:
            410px !important;
    }

}


/*
 * Tablet / mobile
 */

@media (max-width: 900px) {

    .hw-about2 .hw-about2-hero {

        min-height:
            0 !important;

        padding-top:
            18px !important;

        padding-bottom:
            26px !important;

        row-gap:
            18px !important;
    }


    .hw-about2
    .hw-about2-hero-copy {

        margin:
            0 !important;
    }


    .hw-about2
    .hw-about2-hero-copy p {

        margin-bottom:
            18px !important;

        font-size:
            15px !important;

        line-height:
            1.55 !important;
    }


    .hw-about2
    .hw-about2-hero-media {

        max-height:
            none !important;

        margin-top:
            0 !important;
    }


    .hw-about2
    .hw-about2-hero-media img {

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

        max-width:
            100% !important;

        height:
            auto !important;

        max-height:
            none !important;

        object-fit:
            contain !important;

        transform:
            none !important;
    }

}


@media (max-width: 560px) {

    .hw-about2
    .hw-about2-hero {

        padding-top:
            12px !important;

        padding-bottom:
            20px !important;
    }


    .hw-about2
    .hw-about2-hero-cta {

        min-height:
            48px !important;
    }


    .hw-about2
    .hw-about2-hero-media img {

        width:
            104% !important;

        max-width:
            104% !important;

        transform:
            translateX(-2%) !important;
    }

}

/* /HACKER_WEB_ABOUT_COMPACT_V2 */


/* HACKER_WEB_ABOUT_IMAGE_UNSTRETCH_V1 */

/*
 * Fix stretched about hero image
 * Keep natural ratio, do not stretch vertically.
 */

@media (min-width: 901px) {

    .hw-about2
    .hw-about2-hero-media {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        width: 100% !important;
        min-height: 0 !important;
        height: auto !important;
        overflow: visible !important;
    }

    .hw-about2
    .hw-about2-hero-media picture,
    .hw-about2
    .hw-about2-hero-media .hero-visual,
    .hw-about2
    .hw-about2-hero-media .about-hero-visual {
        display: block !important;
        width: auto !important;
        max-width: 100% !important;
        height: auto !important;
        flex: 0 0 auto !important;
    }

    .hw-about2
    .hw-about2-hero-media img {
        display: block !important;
        width: min(100%, 560px) !important;
        max-width: 560px !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: 360px !important;
        object-fit: contain !important;
        object-position: center right !important;
        aspect-ratio: auto !important;
        transform: none !important;
    }

}


/*
 * Medium desktop / laptop
 */
@media (min-width: 901px) and (max-width: 1180px) {

    .hw-about2
    .hw-about2-hero-media img {
        width: min(100%, 500px) !important;
        max-width: 500px !important;
        max-height: 320px !important;
    }

}


/*
 * Tablet / mobile
 */
@media (max-width: 900px) {

    .hw-about2
    .hw-about2-hero-media {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        min-height: 0 !important;
        height: auto !important;
    }

    .hw-about2
    .hw-about2-hero-media img {
        display: block !important;
        width: min(100%, 520px) !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: none !important;
        min-height: 0 !important;
        object-fit: contain !important;
        object-position: center center !important;
        aspect-ratio: auto !important;
        transform: none !important;
    }

}

/* /HACKER_WEB_ABOUT_IMAGE_UNSTRETCH_V1 */


/* HACKER_WEB_ABOUT_IMAGE_BIGGER_V3 */

@media (min-width: 1201px) {

    .hw-about2
    .hw-about2-hero-media img {

        width:
            720px !important;

        max-width:
            720px !important;

        height:
            auto !important;

        max-height:
            none !important;

        object-fit:
            contain !important;
    }

}


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

    .hw-about2
    .hw-about2-hero-media img {

        width:
            640px !important;

        max-width:
            640px !important;

        height:
            auto !important;

        max-height:
            none !important;

        object-fit:
            contain !important;
    }

}

/* /HACKER_WEB_ABOUT_IMAGE_BIGGER_V3 */


/* HACKER_WEB_ABOUT_IMAGE_BIGGER_V3 */

@media (min-width: 1201px) {

    .hw-about2
    .hw-about2-hero-media img {

        width:
            720px !important;

        max-width:
            720px !important;

        height:
            auto !important;

        max-height:
            none !important;

        object-fit:
            contain !important;
    }

}


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

    .hw-about2
    .hw-about2-hero-media img {

        width:
            640px !important;

        max-width:
            640px !important;

        height:
            auto !important;

        max-height:
            none !important;

        object-fit:
            contain !important;
    }

}

/* /HACKER_WEB_ABOUT_IMAGE_BIGGER_V3 */