section.distr-color{margin-bottom:2.5rem;margin-top:2.5rem;overflow:hidden;position:relative;width:100%}@media (min-width:1024px){section.distr-color{margin-bottom:5rem;margin-top:5rem}}section.distr-color .distr-color{grid-gap:2rem;display:grid;gap:2rem;grid-template-columns:repeat(1,minmax(0,1fr));margin-top:1.75rem}@media (min-width:640px){section.distr-color .distr-color{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (min-width:1024px){section.distr-color .distr-color{grid-template-columns:repeat(3,minmax(0,1fr))}}article.color-card a{display:block}article.color-card a header{border-top-left-radius:20px;border-top-right-radius:20px;height:100%;overflow:hidden;position:relative}article.color-card a header img{--tw-scale-x:1.1;--tw-scale-y:1.1;height:224px;object-fit:cover;object-position:center;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(1.1) scaleY(1.1);transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));transition-duration:.3s;width:100%}@media (min-width:768px){article.color-card a header img{height:260px}}article.color-card a header:before{--tw-bg-opacity:0.25;background-color:#00000040;background-color:rgba(0,0,0,var(--tw-bg-opacity));bottom:0;content:"";left:0;position:absolute;right:0;top:0;transition-duration:.3s;z-index:1}article.color-card a footer{margin-top:1.5rem}article.color-card a footer .color-title{font-weight:700;transition-duration:.3s}article.color-card a footer .color-excerpt{align-items:flex-end;display:flex;font-weight:300;gap:.75rem;justify-content:space-between;margin-top:.75rem;transition-duration:.3s}article.color-card a footer .color-excerpt svg{--tw-translate-x:-0.25rem;--tw-translate-y:-2px;margin-left:auto;transform:translate(-.25rem,-2px) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));transition-duration:.3s}article.color-card a footer .color-excerpt svg path{stroke:#1a5bef}article.color-card a:hover{--tw-text-opacity:1;color:#1a5bef;color:rgba(26,91,239,var(--tw-text-opacity))}article.color-card a:hover header img{--tw-scale-x:1;--tw-scale-y:1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(1) scaleY(1);transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}article.color-card a:hover header:before{opacity:0}article.color-card a:hover footer .color-description svg{--tw-translate-x:0px;transform:translateY(var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}