* {padding: 0;margin: 0;box-sizing: border-box;}body {min-height: 100svh;display: grid;place-content: center;background: black;font-family: system-ui, sans-serif;padding: 2rem;}.gallery {--_size: 250px;--_gap: .5rem;--_grid-cols: var(--_size) var(--_size) var(--_size);--_grid-rows: var(--_size) var(--_size) var(--_size);--_size-hover: calc(var(--_size) * 2);--_size-not-hover: calc(var(--_size) / 2);--_speed: 500ms;width: 100%;max-width: 800px;display: grid;gap: var(--_gap);}@media (min-width:720px) {.gallery {grid-template-columns: var(--_grid-cols);transition: var(--_speed) ease-in-out;}}.gallery>div {height: fit-content;display: grid;grid-template-rows: var(--_grid-rows);gap: var(--_gap);transition: var(--_speed) ease-in-out;}.gallery article {position: relative;overflow: hidden;}.gallery img {width: 100%;height: 100%;object-fit: cover;filter: sepia(75%);transition: filter var(--_speed);}.gallery img:hover{filter: sepia(0);}.gallery>div>article>div {position: absolute;bottom: 0;left: 0;background: #00000070;font-size: 0.65rem;color: white;display: flex;align-items: center;gap: .25rem;padding: .15rem 0.5rem;translate: 0 20px;transition: translate var(--_speed) ease-in-out 300ms;}.gallery>div>article>div>span {font-size: 0.7rem;color: red;}.gallery>div>article:hover div {translate: 0;}.gallery:has(>div:nth-child(1):hover) {--_grid-cols: var(--_size-hover) var(--_size-not-hover) var(--_size-not-hover);}.gallery:has(>div:nth-child(2):hover) {--_grid-cols: var(--_size-not-hover) var(--_size-hover) var(--_size-not-hover);}.gallery:has(>div:nth-child(3):hover) {--_grid-cols: var(--_size-not-hover) var(--_size-not-hover) var(--_size-hover);}.gallery>div:has(>article:nth-child(1):hover) {--_grid-rows: var(--_size-hover) var(--_size-not-hover) var(--_size-not-hover);}.gallery>div:has(>article:nth-child(2):hover) {--_grid-rows: var(--_size-not-hover) var(--_size-hover) var(--_size-not-hover);}.gallery>div:has(>article:nth-child(3):hover) {--_grid-rows: var(--_size-not-hover) var(--_size-not-hover) var(--_size-hover);}.material-fill-1 {font-variation-settings: 'FILL'1, 'wght'400, 'GRAD'0, 'opsz'48 }