.material-cards-section{padding-top:40px;padding-bottom:40px}.material-cards-section__header{text-align:center;margin-bottom:30px}.material-cards-grid{display:grid;grid-template-columns:repeat(1,1fr);gap:20px}@media screen and (min-width:750px){.material-cards-grid{grid-template-columns:repeat(2,1fr)}}@media screen and (min-width:990px){.material-cards-grid{grid-template-columns:repeat(var(--grid-cols-desktop, 3),1fr)}}.material-card{position:relative;overflow:hidden;border-radius:12px;border:1px solid rgba(0,0,0,.06);box-shadow:0 6px 18px #0000000f;aspect-ratio:16 / 9;background:#f4f4f4;cursor:pointer}.material-card__image-layer{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1}.material-card__bg-image{width:100%;height:100%;object-fit:cover;display:block;opacity:1;filter:grayscale(.05);transition:transform .6s ease}.material-card__bg-image--placeholder{width:100%;height:100%;opacity:.3}.material-card:hover .material-card__bg-image{transform:scale(1.03)}.material-card__idle-overlay{position:absolute!important;top:0!important;right:0!important;bottom:0!important;left:0!important;z-index:1!important;display:block!important;transition:opacity .35s ease;pointer-events:none;opacity:1}.material-card:hover .material-card__idle-overlay{opacity:0!important}.material-card__idle{position:absolute;top:0;right:0;bottom:0;left:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;padding:20px;transition:opacity .35s ease,transform .35s ease}.material-card:hover .material-card__idle{opacity:0;transform:translateY(-6px);pointer-events:none}.material-card__wordmark-image{max-width:260px;width:var(--logo-width, 70%);height:auto;display:block}.material-card__wordmark-text{font-size:clamp(28px,5vw,48px);font-weight:800;letter-spacing:-.5px;color:#2b2b2b;text-transform:uppercase}.material-card__subtitle{font-size:14px;font-weight:600;color:#2b2b2b;margin:0}.material-card__hover{position:absolute;top:0;right:0;bottom:0;left:0;z-index:3;display:flex;align-items:stretch;opacity:0;transition:opacity .35s ease;pointer-events:none}.material-card:hover .material-card__hover{opacity:1;pointer-events:auto}.material-card__hover-panel{flex:0 0 50%;max-width:50%;position:relative;overflow:hidden;order:1}.material-card__hover-content{height:100%;display:grid;grid-template-rows:auto auto 1fr auto;align-content:start;gap:4px;padding:24px;transform:translate(-16px);transition:transform .4s ease}.material-card:hover .material-card__hover-content{transform:translate(0)}.material-card__wordmark-image--small{max-width:140px;margin-bottom:2px}.material-card__detail-label{font-size:14px;font-weight:700;margin:0 0 2px;color:#1a1a1a}.material-card__detail-text{font-size:12px;line-height:1.35;color:#333;margin:0;align-self:start}.material-card__detail-text p{margin:0}.material-card__buttons{display:flex;flex-direction:column;gap:6px;max-width:200px;align-self:end}.material-card__btn{display:inline-block;text-align:center;padding:6px 14px;font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;text-decoration:none;border-radius:4px;transition:transform .15s ease,background .15s ease}.material-card__btn:hover{transform:translateY(-2px)}.material-card__btn--outline{background:#fff;border:1px solid #444;color:#1a1a1a}.material-card__btn--solid{background:#f4d02c;border:1px solid #f4d02c;color:#1a1a1a}.material-card__detail-image-wrap{flex:0 0 50%;max-width:50%;position:relative;overflow:hidden;transform:translate(30px);opacity:0;transition:transform .45s ease,opacity .45s ease;order:2}.material-card:hover .material-card__detail-image-wrap{transform:translate(0);opacity:1}.material-card__detail-image{width:100%;height:100%;object-fit:cover;display:block}.material-card--panel-right .material-card__hover-panel{order:2}.material-card--panel-right .material-card__detail-image-wrap{order:1;transform:translate(-30px)}.material-card--panel-right:hover .material-card__detail-image-wrap{transform:translate(0)}.material-card--panel-right .material-card__hover-content{transform:translate(16px)}.material-card--panel-right:hover .material-card__hover-content{transform:translate(0)}@media screen and (max-width:749px){.material-card{aspect-ratio:4 / 3}.material-card__hover{flex-direction:column}.material-card__hover-panel{flex:1 1 auto;max-width:100%;order:1}.material-card__hover-content{padding:16px;transform:none}.material-card:hover .material-card__hover-content,.material-card--panel-right:hover .material-card__hover-content{transform:none}.material-card__detail-image-wrap{display:none}}
/*# sourceMappingURL=/cdn/shop/t/13/assets/section-material-hover-cards.css.map */
