.container{&.blog{display:flex;flex-direction:column;gap:2.625rem;ul{display:grid;margin:0;padding:0;grid-gap:1.875rem;gap:1.875rem;list-style:none;a{display:flex;flex-direction:column;justify-content:space-between;width:100%;height:100%;padding:1.125rem;gap:1.125rem;border-radius:.75rem;outline-color:transparent;background-color:var(--background-color-secondary);animation:items-fade-in var(--ease-elastic) both;transition:background-color .24s var(--ease-fluid),outline .24s var(--ease-fluid);animation-timeline:view();animation-range:entry 0 cover 25%;.cover{position:relative;flex:1 1;overflow:hidden;border-radius:.375rem;background-color:var(--background-color-tertiary);img{width:100%;height:100%;object-fit:cover;object-position:center}}.content{display:flex;flex-direction:column;width:100%;line-height:1.8;.meta{margin-top:1em;color:var(--color-caption);font-size:var(--font-size-caption)}h3,p{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;text-overflow:ellipsis}h3{-webkit-line-clamp:1;line-clamp:1}p{-webkit-line-clamp:2;line-clamp:2}}&:focus,&:focus-visible,&:hover{outline-color:var(--background-color-tertiary);outline-style:solid;outline-width:.125rem;background-color:var(--background-color-primary)}}&:first-child{grid-template-columns:1fr 1fr;a{max-height:26rem}}&:last-child{grid-template-columns:1fr 1fr 1fr;a{max-height:20rem}}}@media (max-width:60rem){gap:1.875rem;ul{&:first-child,&:last-child{grid-template-columns:1fr}}}}}@keyframes items-fade-in{0%{transform:translateY(1em);opacity:0}to{transform:translateY(0);opacity:1}}