/*****************************************
* Item
******************************************/
.twc-brand-item {
    --item-padding:30px;
    --item-width-button:60px;
    --item-size-button:16px;
}
.twc-brand-item__inner {display:block; padding:var(--item-padding);}
.twc-brand-item__thumbnail {
    background:#fff;
    border:1px solid rgba(112, 112, 112, .1); padding:16px;
    transition:var(--twc-transition);
}
.twc-brand-item__thumbnail img {transition:var(--twc-transition); aspect-ratio:1/1;}
.twc-brand-item__button {
    width:var(--item-width-button); height:var(--item-width-button);
    background:var(--twc-color-primary); color:var(--twc-color-on-primary); font-size:var(--twc-size-16);
    opacity:0; transition:var(--twc-transition);
}
.main_content .twc-brand-item__title {
    --twc-size-h3:var(--twc-size-24);
    font-weight:500;
}


/* Hover */
.twc-brand-item a:hover {background:var(--twc-color-light-gray); transform:translateY(-10px);}
.twc-brand-item a:hover .twc-brand-item__thumbnail {border-color:#fff;}
.twc-brand-item a:hover .twc-brand-item__thumbnail img {opacity:.15;}
.twc-brand-item a:hover .twc-brand-item__button {opacity:1;}
.twc-blog-item__button:hover {background:var(--twc-color-secondary);}


/*****************************************
* Layout grid
*****************************************/
.twc-brand-list {
    --item-width:33.33%;
    --item-lr-padidng:5px;
}
.twc-brand-list__inner {margin:0 calc(-1 * var(--item-lr-padidng));}
.twc-brand-list .twc-brand-item {width:var(--item-width); padding:0 var(--item-lr-padidng);}


/*****************************************
* Responsive
******************************************/
@media only screen and (max-width:1024px) {
    .twc-brand-list {
        --item-lr-padidng:0px;
    }
    .twc-brand-item {--item-padding:calc(var(--twc-gap-container) / 2);}
}
@media only screen and (max-width:540px) {
    .twc-brand-list {--item-width:50%;}
    .twc-brand-item__thumbnail {padding:10px;}
}