/* =========================================================
   PRODUCT CATALOG
   ========================================================= */

.bp-home-products {

    --bp-blue: #02349c;
    --bp-dark: #101c30;
    --bp-text: #48566a;
    --bp-muted: #707d90;
    --bp-line: #dfe6ef;
    --bp-light: #f6f8fc;

    padding:
        86px 0 92px;

    overflow: hidden;

    background:
        #f6f8fc;

    font-family:
        Montserrat,
        Arial,
        sans-serif;

}


.bp-home-products *,
.bp-home-products *::before,
.bp-home-products *::after {
    box-sizing: border-box;
}


.bp-home-products__container {

    width:
        min(
            1380px,
            calc(100% - 64px)
        );

    margin: 0 auto;

}



/* =========================================================
   HEADER
   ========================================================= */

.bp-home-products__head {

    display: grid;

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

    align-items: end;

    gap: 80px;

    margin-bottom: 39px;

}


.bp-home-products__eyebrow {

    display: inline-flex;

    align-items: center;

    min-height: 34px;

    padding:
        0 14px;

    margin-bottom: 16px;

    border-radius:
        100px;

    background:
        #e6efff;

    color:
        var(--bp-blue);

    font-size:
        12px;

    font-weight:
        750;

    letter-spacing:
        .055em;

    text-transform:
        uppercase;

}


.bp-home-products__head h2 {

    margin: 0;

    color:
        var(--bp-dark);

    font-size:
        clamp(
            38px,
            4vw,
            56px
        );

    line-height:
        1.04;

    font-weight:
        760;

    letter-spacing:
        -.04em;

}


.bp-home-products__head h2 span {

    display: block;

    color:
        var(--bp-blue);

}


.bp-home-products__head-right p {

    margin:
        0 0 15px;

    color:
        var(--bp-muted);

    font-size:
        16px;

    line-height:
        1.7;

}


.bp-home-products__catalog-link {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    color:
        var(--bp-blue) !important;

    font-size:
        14px;

    font-weight:
        720;

    text-decoration:
        none !important;

}



/* =========================================================
   GRID
   ========================================================= */

.bp-home-products__grid {

    display: grid;

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

    gap:
        16px;

}


.bp-home-product {

    grid-column:
        span 2;

    position: relative;

    min-height:
        520px;

    display: flex;

    flex-direction: column;

    overflow: hidden;

    padding:
        23px;

    border:
        1px solid
        var(--bp-line);

    border-radius:
        17px;

    background:
        #fff;

    color:
        var(--bp-text) !important;

    text-decoration:
        none !important;

    box-shadow:
        0 8px 28px
        rgba(18,44,80,.045);

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;

}


.bp-home-product:hover {

    transform:
        translateY(-5px);

    border-color:
        rgba(2,52,156,.25);

    box-shadow:
        0 18px 40px
        rgba(18,44,80,.10);

}


.bp-home-product--wide {

    grid-column:
        span 3;

    min-height:
        400px;

    display: grid;

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

    gap:
        15px;

}



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

.bp-home-product__top {

    display: flex;

    align-items: center;

    justify-content:
        space-between;

    gap:
        15px;

    position:
        relative;

    z-index:
        2;

}


.bp-home-product__number {

    display: flex;

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

    width: 40px;
    height: 40px;

    border-radius:
        50%;

    background:
        #eaf1ff;

    color:
        var(--bp-blue);

    font-size:
        11px;

    font-weight:
        800;

}


.bp-home-product__type {

    min-height:
        29px;

    display:
        inline-flex;

    align-items:
        center;

    padding:
        0 10px;

    border:
        1px solid
        #e0e6ee;

    border-radius:
        100px;

    color:
        #788496;

    font-size:
        10px;

    font-weight:
        700;

    text-transform:
        uppercase;

    letter-spacing:
        .04em;

}



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

.bp-home-product__visual {

    height:
        205px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin:
        3px -8px 3px;

    color:
        var(--bp-blue);

}


.bp-home-product__visual svg {

    width:
        100%;

    max-width:
        360px;

    height:
        100%;

}


.bp-home-product__visual--wide {

    height:
        auto;

    min-height:
        300px;

    margin: 0;

}



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

.bp-home-product__content {

    position: relative;

    z-index: 2;

}


.bp-home-product__label {

    margin-bottom:
        7px;

    color:
        var(--bp-blue);

    font-size:
        11px;

    line-height:
        1.3;

    font-weight:
        750;

    letter-spacing:
        .035em;

    text-transform:
        uppercase;

}


.bp-home-product h3 {

    margin:
        0 0 11px;

    color:
        var(--bp-dark);

    font-size:
        23px;

    line-height:
        1.22;

    font-weight:
        740;

    letter-spacing:
        -.025em;

}


.bp-home-product p {

    margin:
        0;

    color:
        var(--bp-muted);

    font-size:
        15px;

    line-height:
        1.62;

}



/* =========================================================
   BOTTOM
   ========================================================= */

.bp-home-product__bottom {

    display: flex;

    align-items: center;

    justify-content:
        space-between;

    gap:
        15px;

    margin-top:
        auto;

    padding-top:
        21px;

}


.bp-home-product__bottom > span {

    color:
        var(--bp-blue);

    font-size:
        13px;

    font-weight:
        720;

}


.bp-home-product__arrow {

    width:
        38px;

    height:
        38px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius:
        50%;

    background:
        #edf3ff;

    color:
        var(--bp-blue);

    font-size:
        19px;

    transition:
        transform .25s ease,
        background .25s ease,
        color .25s ease;

}


.bp-home-product:hover
.bp-home-product__arrow {

    transform:
        translateX(3px);

    background:
        var(--bp-blue);

    color:
        #fff;

}



/* =========================================================
   WIDE
   ========================================================= */

.bp-home-product__wide-content {

    display: flex;

    flex-direction: column;

}


.bp-home-product--wide h3 {

    max-width:
        520px;

    margin-top:
        42px;

    font-size:
        clamp(
            24px,
            2.3vw,
            32px
        );

}


.bp-home-product--wide p {

    max-width:
        560px;

}



/* =========================================================
   CUSTOM PRODUCT
   ========================================================= */

.bp-home-product--accent {

    border-color:
        rgba(2,52,156,.20);

    background:

        radial-gradient(
            circle at 85% 30%,
            rgba(2,52,156,.10),
            transparent 45%
        ),

        #fff;

}


.bp-home-product__params {

    display: flex;

    flex-direction: column;

    justify-content: center;

    gap:
        8px;

    padding:
        18px;

    border-radius:
        12px;

    background:
        #f4f7fc;

}


.bp-home-product__params div {

    min-height:
        38px;

    display: flex;

    align-items: center;

    justify-content:
        space-between;

    gap:
        10px;

    padding:
        0 12px;

    border:
        1px solid
        #e1e7ef;

    border-radius:
        7px;

    background:
        #fff;

    color:
        #566478;

    font-size:
        12px;

    font-weight:
        650;

}


.bp-home-product__params i {

    width:
        7px;

    height:
        7px;

    flex:
        0 0 auto;

    border-radius:
        50%;

    background:
        var(--bp-blue);

}



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

@media (max-width: 1050px) {

    .bp-home-products__head {

        grid-template-columns:
            1fr;

        gap:
            20px;

    }


    .bp-home-product {

        grid-column:
            span 3;

    }


    .bp-home-product:last-child {

        grid-column:
            2 / span 4;

    }


    .bp-home-product--wide {

        grid-template-columns:
            1fr;

    }


    .bp-home-product__visual--wide {

        min-height:
            220px;

    }


    .bp-home-product--wide h3 {

        margin-top:
            25px;

    }

}



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

@media (max-width: 700px) {

    .bp-home-products {

        padding:
            58px 0 62px;

    }


    .bp-home-products__container {

        width:
            calc(100% - 32px);

    }


    .bp-home-products__head {

        margin-bottom:
            28px;

    }


    .bp-home-products__head h2 {

        font-size:
            clamp(
                32px,
                9.5vw,
                42px
            );

    }


    .bp-home-products__head-right p {

        font-size:
            15px;

    }


    .bp-home-products__grid {

        display:
            grid;

        grid-template-columns:
            1fr;

    }


    .bp-home-product,
    .bp-home-product:last-child,
    .bp-home-product--wide {

        grid-column:
            auto;

        min-height:
            auto;

    }


    .bp-home-product {

        padding:
            20px;

    }


    .bp-home-product__visual {

        height:
            190px;

    }


    .bp-home-product--wide {

        display:
            flex;

        flex-direction:
            column;

    }


    .bp-home-product__visual--wide {

        min-height:
            200px;

        order:
            -1;

    }


    .bp-home-product--wide h3 {

        margin-top:
            28px;

    }


    .bp-home-product h3 {

        font-size:
            21px;

    }


    .bp-home-product p {

        font-size:
            15px;

    }


    .bp-home-product__params {

        margin-top:
            22px;

    }


    .bp-home-product__bottom {

        margin-top:
            22px;

    }

}