#characters{display:flex;flex-wrap:wrap;position:relative;container-type:inline-size;margin:0;padding:0}#characters>figure{display:grid;overflow:hidden;grid-template-columns:1fr;grid-template-rows:1fr auto;position:relative;margin:0;aspect-ratio:1;width:20%}@container (width < 1200px){#characters>figure{width:25%}}@container (width < 900px){#characters>figure{width:33.3333333333%}}@container (width < 600px){#characters>figure{width:50%}}@container (width < 300px){#characters>figure{width:100%}}#characters>figure:hover img{transform:scale(120%)}#characters>figure>a{grid-column:1;grid-row:1/3;z-index:1}#characters>figure:not(:hover) figcaption{opacity:0;transform:translateY(100%)}figcaption{z-index:1;padding:.5em;position:absolute;bottom:0;left:0;right:0;background-color:var(--bg-opacity-color);backdrop-filter:blur(1px);transition:200ms ease-out;margin:0;padding:0;max-height:100%;overflow:auto;font-size:.8rem}img{width:100%;height:100%;aspect-ratio:1;object-fit:cover;vertical-align:top;transition:200ms;z-index:0}