.masonry-grid{columns:18rem;gap:1rem;counter-reset:grid}.grid-item{margin:10px;position:relative}.grid-item--backdrop{transition:transform .15s cubic-bezier(.1,.3,.1,.8),filter .3s cubic-bezier(.1,.3,.6,.8);filter:opacity(0);transform:scale(0);z-index:1;position:absolute;bottom:4px;left:10px;height:80px;width:100%;background:radial-gradient(ellipse at var(--gradient-x) var(--gradient-y),var(--start-color),var(--end-color));animation:colorChange 6s infinite alternate;display:flex;flex-direction:column;justify-content:center;align-items:center}.grid-item--backdrop>div{color:#fff;margin:3px 0}.grid-item--backdrop__sketches{animation:grayChange 6s infinite alternate}@media(max-width:1024px){.grid-item--backdrop{display:none}}.grid-item--image{transition:all .3s cubic-bezier(.1,.3,.6,.8);z-index:1;transform:translate(10px);filter:blur(0) contrast(100%)}.grid-item:hover .grid-item--backdrop{transform:scale(1);filter:opacity(.85)}.grid-item img{width:100%;height:100%}.catalog{overflow-y:auto;padding-right:20px;padding-top:10px;height:100%;position:relative}@property --start-color{syntax:"<color>";inherits:false;initial-value:#64a5e6}@property --end-color{syntax:"<color>";inherits:false;initial-value:#64a5e6}@property --gradient-x{syntax:"<percentage>";inherits:false;initial-value:0}@property --gradient-y{syntax:"<percentage>";inherits:false;initial-value:0}@keyframes colorChange{0%{--start-color:rgba(255,113,94);--end-color:rgb(218,212,101);--gradient-x:0%;--gradient-y:0%}to{--start-color:rgb(100,122,230);--end-color:rgb(101,218,177);--gradient-x:20%;--gradient-y:20%}}@keyframes grayChange{0%{--start-color:rgb(83,83,83);--end-color:rgb(131,131,131);--gradient-x:0%;--gradient-y:0%}to{--start-color:rgb(128,128,128);--end-color:rgb(81,81,81);--gradient-x:20%;--gradient-y:20%}}