.b5-ref-section,
.b5-ref-section *{
    box-sizing:border-box;
}

.b5-ref-section{
    width:100%;
    position:relative;
    overflow:hidden;
}

.b5-ref-wrap{
    display:grid;
    grid-template-columns:minmax(280px, 430px) minmax(0, 1fr);
    align-items:stretch;
    gap:54px;
}

.b5-ref-wrap.b5-ref-reverse{
    grid-template-columns:minmax(0, 1fr) minmax(280px, 430px);
}

.b5-ref-wrap.b5-ref-reverse .b5-ref-content{
    order:2;
}

.b5-ref-wrap.b5-ref-reverse .b5-ref-grid-wrap{
    order:1;
}

.b5-ref-content{
    display:flex;
    flex-direction:column;
    justify-content:center;
    max-width:420px;
}

.b5-ref-eyebrow{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:26px;
    font-size:16px;
    line-height:1.2;
    font-weight:500;
}

.b5-ref-eyebrow span{
    width:48px;
    height:1px;
    background:currentColor;
    opacity:.45;
    display:block;
}

.b5-ref-title{
    margin:0 0 28px;
    font-size:64px;
    line-height:1.05;
    font-weight:700;
    letter-spacing:-0.03em;
    white-space:pre-line;
}

.b5-ref-description{
    font-size:18px;
    line-height:1.75;
}

.b5-ref-description p{
    margin:0;
}

.b5-ref-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:auto;
    text-decoration:none;
    margin-top:40px;
    transition:all .28s ease;
    font-size:18px;
    font-weight:600;
    line-height:1;
}

.b5-ref-grid-wrap{
    min-width:0;
    display:flex;
    align-items:center;
}

.b5-ref-grid{
    --b5-grid-line:#d7d7d7;
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    width:100%;
    border-top:1px solid var(--b5-grid-line);
    border-left:1px solid var(--b5-grid-line);
    gap:0;
}

.b5-ref-item{
    min-height:170px;
    border-right:1px solid var(--b5-grid-line);
    border-bottom:1px solid var(--b5-grid-line);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:26px;
    transition:transform .28s ease, background-color .28s ease, box-shadow .28s ease;
}

.b5-ref-item a,
.b5-ref-logo{
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    height:100%;
}

.b5-ref-item img{
    display:block;
    width:auto;
    max-width:68%;
    max-height:74px;
    height:auto;
    object-fit:contain;
    transition:filter .28s ease, opacity .28s ease, transform .28s ease;
    opacity:.65;
}

.b5-ref-section.b5-ref-gray .b5-ref-item img{
    filter:grayscale(100%);
}

.b5-ref-section.b5-ref-gray .b5-ref-item:hover img{
    filter:grayscale(0%);
}

.b5-ref-item:hover img{
    opacity:1;
}

.b5-hover-lift .b5-ref-item:hover{
    transform:translateY(-6px);
}

.b5-hover-zoom .b5-ref-item:hover img{
    transform:scale(1.04);
}

@media (max-width: 1024px){
    .b5-ref-wrap,
    .b5-ref-wrap.b5-ref-reverse{
        grid-template-columns:1fr;
    }

    .b5-ref-wrap.b5-ref-reverse .b5-ref-content,
    .b5-ref-wrap.b5-ref-reverse .b5-ref-grid-wrap{
        order:initial;
    }

    .b5-ref-content{
        max-width:100%;
    }

    .b5-ref-title{
        font-size:48px;
    }
}

@media (max-width: 767px){
    .b5-ref-eyebrow{
        margin-bottom:18px;
        font-size:14px;
    }

    .b5-ref-title{
        margin-bottom:18px;
        font-size:38px;
        line-height:1.08;
    }

    .b5-ref-description{
        font-size:16px;
        line-height:1.7;
    }

    .b5-ref-button{
        margin-top:28px;
        width:100%;
        text-align:center;
    }

    .b5-ref-item{
        padding:18px;
        min-height:110px;
    }

    .b5-ref-item img{
        max-width:78%;
        max-height:52px;
    }
}