.blogCards{--card-pad: .5rem;margin:0;padding:0;list-style:none}.blogCards>li{position:relative;isolation:isolate}.blogCards>li:before{content:"";position:absolute;z-index:0;top:0;right:0;bottom:0;left:0;border-radius:var(--common-radius);background:rgb(var(--color-background));box-shadow:0 0 rgba(var(--color-shadow),0);transition:inset .4s ease-in-out,box-shadow .4s ease-in-out,opacity .4s ease-in-out}.blogCards>li>a{position:relative;z-index:1;display:flex;align-items:center;gap:var(--gutter2);padding:var(--card-pad);color:rgb(var(--color-foreground));text-decoration:none}.blogCards>li>a>figure{flex:0 0 clamp(5rem,28%,9rem);margin:0;overflow:hidden;border-radius:calc(var(--common-radius) - var(--card-pad) * .5);background:rgba(var(--color-foreground),.08)}.blogCards>li>a>figure>img{display:block;width:100%;height:auto;transition:scale .4s ease-in-out}.blogCards>li>a>figure[data-square]{aspect-ratio:1}.blogCards>li>a>figure[data-square]>img{height:100%;object-fit:cover}.blogCards>li>a>figure:not(:has(img)){aspect-ratio:1;display:grid;place-items:center;background:#fff}.blogCards>li>a>figure:not(:has(img))>span{width:45%;aspect-ratio:399 / 250;background-color:rgb(var(--theme-brand));mask:var(--logo-mask) no-repeat center / contain;-webkit-mask:var(--logo-mask) no-repeat center / contain}.blogCards>li>a>div{min-width:0;flex:1;padding-right:var(--pad-b2)}.blogCards>li>a>div>b{display:block;margin-bottom:.5em;color:rgb(var(--theme-brand));font-weight:var(--regular);font-size:1.25rem;letter-spacing:.08em;line-height:var(--lh100)}.blogCards>li>a>div>:is(h2,h3){margin:0;font-size:1rem;overflow-wrap:anywhere}.blogCards>li>a>div>p{display:flex;flex-wrap:wrap;align-items:baseline;gap:.25em 1.5em;margin:.75em 0 0;color:rgba(var(--color-foreground),.7);font-size:.8em;line-height:var(--lh125);column-rule:1px solid rgba(var(--color-foreground),.2)}.blogCards>li>a>.cardArrow{flex:0 0 1.5rem;align-self:center;display:flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;--arrow-size: .6rem}.blogCards>li>a:has(>mark)>div>:is(h2,h3){padding-right:2em}.blogCards>li>a>mark{position:absolute;top:var(--card-pad);right:var(--card-pad)}@media(hover:hover){.blogCards>li:hover{z-index:1}.blogCards>li:hover:before{box-shadow:0 .5em 1.5em rgba(var(--color-shadow),.16);opacity:1}.blogCards>li:hover>a>figure>img{scale:1.1}}.blogCards>li:focus-within{z-index:1}.blogCards>li:focus-within:before{box-shadow:0 .5em 1.5em rgba(var(--color-shadow),.16);opacity:1}@media screen and (max-width:1024px){.blogCards>li>a{gap:.5rem 1rem;align-items:flex-start;align-content:flex-start}.blogCards>li>a>div{padding:1rem;padding-right:var(--pad-b2)}.blogCards>li>a>.cardArrow{flex-basis:1rem;width:1rem;height:1rem;--arrow-size: .5rem}}
/*# sourceMappingURL=/cdn/shop/t/67/assets/component-blog-card.css.map */