.card{--transition-duration:.4s;--image-transition-duration:.5s;flex-basis:23.75rem;flex-grow:1;position:relative;z-index:0}.card__image{--opacity:.01;background-color:var(--bg-color);background-image:linear-gradient(23deg,hsla(0,0%,79%,.02) 0,hsla(0,0%,79%,.02) 13%,transparent 13%,transparent 80%,hsla(0,0%,4%,.02) 80%,hsla(0,0%,4%,.02) 100%),linear-gradient(42deg,rgba(98,98,98,.02) 0,rgba(98,98,98,.02) 36%,transparent 36%,transparent 77%,hsla(0,0%,99%,.02) 77%,hsla(0,0%,99%,.02) 100%),linear-gradient(286deg,hsla(0,0%,68%,.02) 0,hsla(0,0%,68%,.02) 2%,transparent 2%,transparent 12%,rgba(59,59,59,.02) 12%,rgba(59,59,59,.02) 100%),linear-gradient(77deg,rgba(87,87,87,.02) 0,rgba(87,87,87,.02) 18%,transparent 18%,transparent 55%,hsla(0,0%,97%,.02) 55%,hsla(0,0%,97%,.02) 100%),linear-gradient(rgb(0,0,0,var(--opacity)),rgb(0,0,0,var(--opacity)));border-radius:1rem;display:grid;height:15rem;margin-bottom:.5rem;overflow:hidden;place-content:center;position:relative;transition:var(--transition-duration);z-index:-1}@media (max-width:33rem){.card__image{height:12rem}}.card:hover .card__image{--s:0%;--l:97%}.card__image:before{color:#fff;font-size:11.25rem;font-weight:600;opacity:.5;text-shadow:-.0625rem 0 0 hsl(var(--color)/.15),0 -.0625rem 0 hsl(var(--color)/.15),.0625rem 0 0 hsl(var(--color)/.15),0 .0625rem 0 hsl(var(--color)/.15);transition:var(--image-transition-duration)}.card__image--css{--color:var(--color-blue-hsl);background-image:radial-gradient(circle at 17% 77%,#1212120a 0 50%,#c4c4c40a 0 100%),radial-gradient(circle at 26% 17%,#4040400a 0 50%,#f5f5f50a 0 100%),radial-gradient(circle at 44% 60%,#b0b0b00a 0 50%,#bababa0a 0 100%),linear-gradient(33deg,#6cacff,#8debff)}.card__image--css:before{content:"CSS"}.card__image--js{--color:var(--color-orange-hsl);background-image:linear-gradient(339deg,rgba(47,47,47,.02),rgba(47,47,47,.02) 42%,transparent 0,transparent 99%,hsla(0,0%,7%,.02) 0,hsla(0,0%,7%,.02)),linear-gradient(257deg,rgba(65,65,65,.02),rgba(65,65,65,.02) 11%,transparent 0,transparent 92%,rgba(53,53,53,.02) 0,rgba(53,53,53,.02)),linear-gradient(191deg,rgba(5,5,5,.02),rgba(5,5,5,.02) 1%,transparent 0,transparent 45%,hsla(0,0%,7%,.02) 0,hsla(0,0%,7%,.02)),linear-gradient(29deg,rgba(28,28,28,.02),rgba(28,28,28,.02) 33%,transparent 0,transparent 40%,hsla(0,0%,86%,.02) 0,hsla(0,0%,86%,.02)),linear-gradient(33deg,#f78fad,#fdeb82)}.card__image--js:before{content:"JS"}.card__image--vue{--color:var(--color-green-hsl);background-image:linear-gradient(242deg,#1212120a,#1212120a 65%,#8282820a 0,#8282820a),linear-gradient(49deg,#c2c2c20a,#c2c2c20a 72%,#8787870a 0,#8787870a),linear-gradient(78deg,#2525250a,#2525250a 90%,#2828280a 0,#2828280a),linear-gradient(310deg,#e8e8e80a,#e8e8e80a 25%,#2f2f2f0a 0,#2f2f2f0a),linear-gradient(33deg,#3fb984,#92ffca)}.card__image--vue:before{content:"Vue"}.card__image--wp{--color:var(--color-blue-hsl);background-image:radial-gradient(circle at 85% 1%,hsla(0,0%,93%,.05) 0,hsla(0,0%,93%,.05) 96%,transparent 0,transparent 100%),radial-gradient(circle at 60% 90%,hsla(0,0%,93%,.05) 0,hsla(0,0%,93%,.05) 20%,transparent 0,transparent 100%),radial-gradient(circle at 79% 7%,hsla(0,0%,93%,.05) 0,hsla(0,0%,93%,.05) 78%,transparent 0,transparent 100%),radial-gradient(circle at 55% 65%,hsla(0,0%,93%,.05) 0,hsla(0,0%,93%,.05) 52%,transparent 0,transparent 100%),linear-gradient(33deg,#475d97cc,#3765c3cc)}.dark-mode .card__image{--opacity:.2}.card__icon{color:#ffffff80}.card__icon,.card__img{transition:var(--image-transition-duration)}.card__img{-o-object-fit:cover;object-fit:cover}.card__img[src=""]{display:none}.card__inner{background:var(--color-white)}.card__title{color:var(--color-blue);font-size:1.5rem;font-weight:550;line-height:1.3;padding:1rem 0 .5rem;text-wrap:balance;transition:margin var(--transition-duration)}@media (max-width:33rem){.card__title{font-size:1.25rem;padding-top:.5rem}}.active .card__title{view-transition-name:title}.card__link:after{content:"";inset:0;position:absolute}.card__meta{align-items:center;color:var(--color-gray);display:flex;flex-wrap:wrap;font-size:.875rem;gap:.25rem 1.5rem;transition:var(--transition-duration)}.card__comments,.card__pub{align-items:center;display:flex;gap:.375rem}.active .card__comments{view-transition-name:comments}.active .card__pub{view-transition-name:pub}.card__pub:after{content:attr(data-pub)}.card__pub-icon{margin-bottom:.125rem}.card__comments-icon,.card__pub-icon{color:var(--color-red)}.card__text{display:-webkit-box;height:0;margin-top:1rem;overflow:hidden;-webkit-line-clamp:3;opacity:0;transition:var(--transition-duration);-webkit-box-orient:vertical}.active .card__text{view-transition-name:text}@media (hover:hover) and (pointer:fine){.card:hover .card__image:before{transform:scale(1.3)}.card:hover .card__icon,.card:hover .card__img{transform:scale(1.2)}.card:hover .card__title{color:var(--color-red);margin-top:-4.5rem}.card:hover .card__text{height:4.5rem;opacity:1}}