/*********************************************
 * Sample Element
**********************************************/
.br-projects-v3 {}

/* content */
.br-projects-v3__content {
    --wd-title-color:#414549;
    font-size:20px; font-weight:500;
    max-width:725px; margin-left:auto; margin-right:auto;
}

/* grid */
.br-projects-v3__list .br-flex-grid {
    --grid-col:2;
    --grid-gap-x:40px;
    --grid-gap-y:90px;
}

/* item > image */
.br-project-item__thumbnail {aspect-ratio:619/344; margin-bottom:16px;}
.br-project-item__thumbnail:before {background:#000; opacity:0; z-index:1; transition:opacity .3s ease;}
.br-project-item__thumbnail img {transition:transform .3s ease;}
.br-project-item a:hover .br-project-item__thumbnail:before {opacity:.3;}
.br-project-item a:hover .br-project-item__thumbnail img {transform:scale(1.03);}

/* item > info */
.br-project-item__info-col.title {width:59%; padding-right:16px; border-right:1px solid #e5e7e8; margin-bottom:0;}
.br-project-item__title {font-size:24px; font-weight:600; color:#414549; margin-bottom:16px;}
.br-project-item__button {
    --button-icon:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjAgMCAxMiAxMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEuMzMzMzMgMTJDMC45NjY2NjcgMTIgMC42NTI3NzggMTEuODY5NCAwLjM5MTY2NyAxMS42MDgzQzAuMTMwNTU2IDExLjM0NzIgMCAxMS4wMzMzIDAgMTAuNjY2N1YxLjMzMzMzQzAgMC45NjY2NjcgMC4xMzA1NTYgMC42NTI3NzggMC4zOTE2NjcgMC4zOTE2NjdDMC42NTI3NzggMC4xMzA1NTYgMC45NjY2NjcgMCAxLjMzMzMzIDBINlYxLjMzMzMzSDEuMzMzMzNWMTAuNjY2N0gxMC42NjY3VjZIMTJWMTAuNjY2N0MxMiAxMS4wMzMzIDExLjg2OTQgMTEuMzQ3MiAxMS42MDgzIDExLjYwODNDMTEuMzQ3MiAxMS44Njk0IDExLjAzMzMgMTIgMTAuNjY2NyAxMkgxLjMzMzMzWk00LjQ2NjY3IDguNDY2NjdMMy41MzMzMyA3LjUzMzMzTDkuNzMzMzMgMS4zMzMzM0g3LjMzMzMzVjBIMTJWNC42NjY2N0gxMC42NjY3VjIuMjY2NjdMNC40NjY2NyA4LjQ2NjY3WiIgZmlsbD0iIzU2OURGRiIvPgo8L3N2Zz4K);
    --button-icon-hover:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjAgMCAxMiAxMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEuMzMzMzMgMTJDMC45NjY2NjcgMTIgMC42NTI3NzggMTEuODY5NCAwLjM5MTY2NyAxMS42MDgzQzAuMTMwNTU2IDExLjM0NzIgMCAxMS4wMzMzIDAgMTAuNjY2N1YxLjMzMzMzQzAgMC45NjY2NjcgMC4xMzA1NTYgMC42NTI3NzggMC4zOTE2NjcgMC4zOTE2NjdDMC42NTI3NzggMC4xMzA1NTYgMC45NjY2NjcgMCAxLjMzMzMzIDBINlYxLjMzMzMzSDEuMzMzMzNWMTAuNjY2N0gxMC42NjY3VjZIMTJWMTAuNjY2N0MxMiAxMS4wMzMzIDExLjg2OTQgMTEuMzQ3MiAxMS42MDgzIDExLjYwODNDMTEuMzQ3MiAxMS44Njk0IDExLjAzMzMgMTIgMTAuNjY2NyAxMkgxLjMzMzMzWk00LjQ2NjY3IDguNDY2NjdMMy41MzMzMyA3LjUzMzMzTDkuNzMzMzMgMS4zMzMzM0g3LjMzMzMzVjBIMTJWNC42NjY2N0gxMC42NjY3VjIuMjY2NjdMNC40NjY2NyA4LjQ2NjY3WiIgZmlsbD0iI0ZGQzgxNCIvPgo8L3N2Zz4K);
    color:#569dff; font-size:14px; font-weight:500;
    padding-right:24px; position:relative; transition:color .3s ease;
}
.br-project-item__button:before, .br-project-item__button:after {
    content:"";
    position:absolute; top:50%; right:0; transform:translateY(-50%);
    background-size:contain; background-repeat:no-repeat; height:12px; width:12px;
    transition:opacity .3s ease;
}
.br-project-item__button:before {background-image:var(--button-icon);}
.br-project-item__button:after {background-image:var(--button-icon-hover); z-index:1;}
.br-project-item a:hover .br-project-item__button {color:var(--br-color-primary);}
.br-project-item a:not(:hover) .br-project-item__button:after,
.br-project-item a:hover .br-project-item__button:before {opacity:0;}

.br-project-item__info-col.info {width:41%; padding-left:16px;}
.br-project-item__info-item {display:flex; font-size:14px; font-weight:500; color:#414549;}
.br-project-item__info-item:not(:last-child) {margin-bottom:4px;}
.br-project-item__info-label {white-space:nowrap; color:#808b90; min-width:100px;}
.br-project-item__info-value {font-weight:600;}

/* button */
.br-projects-v3__button {text-align:center; padding-top:60px;}


/*********************************************
 * Sample Element Responsive
**********************************************/
@media only screen and (max-width:1024px) {
    /* grid */
    .br-projects-v3__list .br-flex-grid {
        --grid-gap-x:15px;
        --grid-gap-y:60px;
    }
    .br-projects-v3__button {padding-top:40px;}
    .br-project-item__info {flex-direction:column; padding-bottom:35px; position:relative;}
    .br-project-item__info-col.title {width:100%; padding-right:0; border-right:none;}
    .br-project-item__info-col.info {width:100%; padding-left:0;}
    .br-project-item__button {position:absolute; bottom:0; left:0;}
}
@media only screen and (max-width:600px) {
    /* grid */
    .br-projects-v3__list .br-flex-grid {
        --grid-col:1;
        --grid-gap-y:40px;
    }
    .br-project-item__title {font-size:18px;}
}