/*********************************************
 * Sample Element
**********************************************/
.br-icon-buttons {
    --grid-pos-y:-1px;
    --size-check:160px;
    --icon-check:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjgiIGhlaWdodD0iNjgiIHZpZXdCb3g9IjAgMCA2OCA2OCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTI5LjMzMzIgNDkuMzMyN0w1Mi44MzMyIDI1LjgzMjdMNDguMTY2NSAyMS4xNjZMMjkuMzMzMiAzOS45OTk0TDE5LjgzMzIgMzAuNDk5NEwxNS4xNjY1IDM1LjE2NkwyOS4zMzMyIDQ5LjMzMjdaTTMzLjk5OTggNjcuMzMyN0MyOS4zODg3IDY3LjMzMjcgMjUuMDU1NCA2Ni40NTc3IDIwLjk5OTggNjQuNzA3N0MxNi45NDQzIDYyLjk1NzcgMTMuNDE2NSA2MC41ODI3IDEwLjQxNjUgNTcuNTgyN0M3LjQxNjUgNTQuNTgyNyA1LjA0MTUgNTEuMDU0OSAzLjI5MTUgNDYuOTk5NEMxLjU0MTUgNDIuOTQzOCAwLjY2NjUwNCAzOC42MTA1IDAuNjY2NTA0IDMzLjk5OTRDMC42NjY1MDQgMjkuMzg4MiAxLjU0MTUgMjUuMDU0OSAzLjI5MTUgMjAuOTk5NEM1LjA0MTUgMTYuOTQzOCA3LjQxNjUgMTMuNDE2IDEwLjQxNjUgMTAuNDE2QzEzLjQxNjUgNy40MTYwMiAxNi45NDQzIDUuMDQxMDIgMjAuOTk5OCAzLjI5MTAyQzI1LjA1NTQgMS41NDEwMiAyOS4zODg3IDAuNjY2MDE2IDMzLjk5OTggMC42NjYwMTZDMzguNjExIDAuNjY2MDE2IDQyLjk0NDMgMS41NDEwMiA0Ni45OTk4IDMuMjkxMDJDNTEuMDU1NCA1LjA0MTAyIDU0LjU4MzIgNy40MTYwMiA1Ny41ODMyIDEwLjQxNkM2MC41ODMyIDEzLjQxNiA2Mi45NTgyIDE2Ljk0MzggNjQuNzA4MiAyMC45OTk0QzY2LjQ1ODIgMjUuMDU0OSA2Ny4zMzMyIDI5LjM4ODIgNjcuMzMzMiAzMy45OTk0QzY3LjMzMzIgMzguNjEwNSA2Ni40NTgyIDQyLjk0MzggNjQuNzA4MiA0Ni45OTk0QzYyLjk1ODIgNTEuMDU0OSA2MC41ODMyIDU0LjU4MjcgNTcuNTgzMiA1Ny41ODI3QzU0LjU4MzIgNjAuNTgyNyA1MS4wNTU0IDYyLjk1NzcgNDYuOTk5OCA2NC43MDc3QzQyLjk0NDMgNjYuNDU3NyAzOC42MTEgNjcuMzMyNyAzMy45OTk4IDY3LjMzMjdaTTMzLjk5OTggNjAuNjY2QzQxLjQ0NDMgNjAuNjY2IDQ3Ljc0OTggNTguMDgyNyA1Mi45MTY1IDUyLjkxNkM1OC4wODMyIDQ3Ljc0OTQgNjAuNjY2NSA0MS40NDM4IDYwLjY2NjUgMzMuOTk5NEM2MC42NjY1IDI2LjU1NDkgNTguMDgzMiAyMC4yNDk0IDUyLjkxNjUgMTUuMDgyN0M0Ny43NDk4IDkuOTE2MDIgNDEuNDQ0MyA3LjMzMjY4IDMzLjk5OTggNy4zMzI2OEMyNi41NTU0IDcuMzMyNjggMjAuMjQ5OCA5LjkxNjAyIDE1LjA4MzIgMTUuMDgyN0M5LjkxNjUxIDIwLjI0OTQgNy4zMzMxNyAyNi41NTQ5IDcuMzMzMTcgMzMuOTk5NEM3LjMzMzE3IDQxLjQ0MzggOS45MTY1MSA0Ny43NDk0IDE1LjA4MzIgNTIuOTE2QzIwLjI0OTggNTguMDgyNyAyNi41NTU0IDYwLjY2NiAzMy45OTk4IDYwLjY2NloiIGZpbGw9IiMxRENGNEMiLz4KPC9zdmc+Cg==);

    padding:var(--br-spacing-80) var(--br-gap-side);
    min-height:calc(var(--br-100vh) - var(--br-header-height));
}

/* icon decoration */
.br-icon-buttons:before {
    font-family:var(--br-font-icomoon); content:"\e902";
    font-size:1024px; line-height:1; color:#f4f4f4;
    position:absolute; top:0; left:0; transform:translate(-28.1%, -14.2%); z-index:1;
    pointer-events:none;
}

/* content */
.br-icon-buttons__content {padding-top:calc(var(--size-check) + var(--br-spacing-40));}
.br-icon-buttons__content:before {
    content:"";
    display:flex; align-items:center; justify-content:center;
    width:var(--size-check); height:var(--size-check);
    border-radius:50%; box-shadow:0 8px 24px rgba(39, 28, 28, .12), 0 2px 4px rgba(39, 28, 28, .08);
    background-image:var(--icon-check); background-color:#fff; background-position:center;
    background-repeat:no-repeat;
    position:absolute;left:50%; top:0; transform:translateX(-50%);
}
.br-icon-buttons__content .heading_4 {font-weight:400;}

/* list icon */
.br-icon-buttons__list {
    --grid-gap-x:var(--br-gap-container);
    --grid-gap-y:var(--grid-gap-x);

    width:100%;
}
.br-icon-buttons__item-button {
    min-height:88px; width:100%;
    background:linear-gradient(344deg, #333 154.82%, #313131 -53.01%);
    gap:16px; padding:5px 24px;
}
.br-icon-buttons__item-button:before {
    content:"";
    position:absolute; inset:0; background:var(--br-color-primary); z-index:1;
    opacity:0; transition:opacity .3s ease;
}
.br-icon-buttons__item.type-image .br-icon-buttons__item-media img {height:40px;}
.br-icon-buttons__item.type-icomoon .br-icon-buttons__item-media i {font-size:32px;}
.br-icon-buttons__item-button:hover:before, .br-icon-buttons__item-button:focus:before {opacity:1;}


/*********************************************
 * Sample Element Responsive
**********************************************/
@media only screen and (max-width:1024px) {
    /* icon decoration */
    .br-icon-buttons:before {
        font-size:calc(1.5 * var(--br-100vh) - var(--br-header-height));
        left:0; top:0; transform:translate(-35%, calc(-0.25 * var(--br-100vh) - var(--br-header-height)));
        opacity:.6;
    }
}
@media only screen and (max-width:920px) {
    .br-icon-buttons {--grid-size:32px;}
}
@media only screen and (max-width:768px) {
    .br-icon-buttons {--size-check:120px; min-height:unset; padding-top:var(--br-spacing-40); padding-bottom:var(--br-spacing-40)}
    .br-icon-buttons:before {font-size:80vh; transform:translate(-35%, -21%);}
    .br-icon-buttons__content:before {background-size:50px;}
    .br-icon-buttons__item {width:auto;}
    .br-icon-buttons__item-button {min-height:60px;}
    .br-icon-buttons__item.type-image .br-icon-buttons__item-media img {height:32px;}
    .br-icon-buttons__item .br-icon-buttons__item-title {font-size:20px;}
    .br-icon-buttons__item.type-icomoon .br-icon-buttons__item-media i {font-size:24px;}
}
@media only screen and (max-width:480px) {
    .br-icon-buttons {--size-check:80px;}
    .br-icon-buttons__content {--br-spacing-40:24px;}
    .br-icon-buttons__content:before {background-size:36px;}
    .br-icon-buttons__list {--grid-gap-x:12px;}
    .br-icon-buttons__item-button {padding-left:20px; padding-right:20px; gap:10px; min-height:50px;}
    .br-icon-buttons__item.type-image .br-icon-buttons__item-media img {height:28px;}
    .br-icon-buttons__item .br-icon-buttons__item-title {font-size:18px;}
    .br-icon-buttons__item.type-icomoon .br-icon-buttons__item-media i {font-size:20px;}
}