.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:#ff715e;--end-color:#dad465;--gradient-x:0%;--gradient-y:0%}to{--start-color:#647ae6;--end-color:#65dab1;--gradient-x:20%;--gradient-y:20%}}@keyframes grayChange{0%{--start-color:#535353;--end-color:#838383;--gradient-x:0%;--gradient-y:0%}to{--start-color:grey;--end-color:#515151;--gradient-x:20%;--gradient-y:20%}}