.blog-item{cursor:pointer;display:flex;flex-basis:calc(33.333% - 11px);flex-direction:column;height:100%;justify-content:space-between;position:relative}@media screen and (max-width:960px){.blog-item{flex-basis:calc(50% - 11px)}}@media screen and (max-width:640px){.blog-item{flex-basis:100%}}.blog-item:hover .blog-item__text{color:var(--steam-text-base-default-hover)}.blog-item:hover .blog-item__photo-tag{--button-background:var(--steam-surface-button-primary-hover)}.blog-item__photo{align-items:center;aspect-ratio:16/9;background:var(--steam-surface-page-invert-subdued,hsla(0,0%,100%,.1));border-radius:var(--radius-x2);display:flex;flex-shrink:0;justify-content:center;overflow:hidden;position:relative}.blog-item__photo-spinner{--spinner-size:24px;position:absolute}.blog-item__photo.is-loading img{opacity:0}.blog-item__photo img{border-radius:var(--radius-x2);display:block;height:100%;-o-object-fit:cover;object-fit:cover;transition:opacity .2s ease;width:100%}.blog-item__photo-tag{--button-height:24px;--button-padding:0 var(--spacing-x3);left:24px;position:absolute;top:-12px}@media screen and (max-width:960px){.blog-item__photo-tag{left:16px}}.blog-item__text{font-size:var(--font-size-body-L,16px);font-weight:500;line-height:var(--line-height-body-L,22px);margin:28px 0 var(--spacing-x4) 0;transition:all .2s ease;word-break:break-word}@media screen and (max-width:640px){.blog-item__text{font-size:var(--font-size-body-L,15px);font-weight:500;line-height:var(--line-height-body-L,21px)}}.blog-item__date{color:var(--steam-text-base-default-subdued);font-size:var(--font-size-body-M,14px);font-weight:500;line-height:var(--line-height-body-M,19px)}@media screen and (max-width:640px){.blog-item__date{font-size:var(--font-size-body-M,13px);font-weight:500;line-height:var(--line-height-body-M,19px)}}.blog-item__footer{margin-bottom:auto;padding:0 var(--spacing-x5);position:relative}
