/*********************************************
 * Sample Element
**********************************************/
.br-info-box {
    --ib-gap:35px;
    --ib-column:3;
    --ib-gap-total:calc(var(--ib-gap) * (var(--ib-column) - 1));
    --ib-space-each:calc(var(--ib-gap-total) / var(--ib-column));
    --ib-height:clamp(350px, 50vw, 900px);
}
.br-info-box__inner {
    gap:var(--ib-gap);
    max-width:calc(1600px + 2 * var(--ib-gap)); padding-right:var(--ib-gap); padding-left:var(--ib-gap); margin:auto;
}
.br-info-box__item {
    width:calc(100% / var(--ib-column) - var(--ib-space-each));
    position:relative;min-height:var(--ib-height);
}
.br-info-box__bg {z-index:1;}
.br-info-box__bg-img {height:100%; position:relative;}
.br-info-box__bg-img:before {
    background:linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
    pointer-events:none; z-index:1;
}
.br-info-box__item-info {z-index:2; color:#fff; padding:0 30px 40px;}
.br-info-box__logo {min-height:107px; margin-bottom:20px;}
.br-info-box__logo-bg {height:85px;}
.br-info-box__content {font-size:20px; font-weight:500;}


/*********************************************
 * Sample Element Responsive
**********************************************/
@media only screen and (max-width:1440px) {
    .br-info-box {
        --ib-gap:30px;
    }
}
@media only screen and (max-width:1200px) {
    .br-info-box {--ib-gap:15px;}
    .br-info-box__item-info {padding:0 15px 20px;}
    .br-info-box__logo-bg {height:70px;}
    .br-info-box__logo {min-height:unset;}
}
@media only screen and (max-width:1023px) {
    .br-info-box {--ib-column:2;}
    .br-info-box__content {font-size:18px;}
}
@media only screen and (max-width:540px) {
    .br-info-box {--ib-column:1; --br-spacing-140:40px;}
}