*{box-sizing:border-box}body{margin:0;padding:0;font-family:GFS Didot,serif;overflow-x:hidden}#gallery{background:linear-gradient(#e8edea 0%,#d2d8d3 85%,#c5c9c8 86%,#d2d8d3 100%);flex-direction:column;justify-content:center;align-items:center;min-height:80vh;margin:0 auto;display:flex}#frame{flex-wrap:wrap;justify-content:center;margin:0 auto;padding:0;list-style:none;display:flex}#frame li{justify-content:center;align-items:center;display:none}#frame li.active{display:block}#frame li figure{flex-direction:column;align-items:center;display:flex;position:relative}#frame li figure img{border:25px solid #0000;border-image:url(https://assets.codepen.io/11614/frame2.png) 30 round;max-block-size:325px;box-shadow:0 15px 10px #00000040}#frame li figure figcaption{text-align:center;background-color:var(--color-blush);color:#000;z-index:10;box-sizing:border-box;max-block-size:100px;border:.1px solid var(--color-brand);justify-content:center;align-items:center;width:30%;padding:.5rem;font-size:10px;display:flex;position:absolute;bottom:-20px;left:50%;overflow:hidden;transform:translate(-50%);box-shadow:2px 2px 3px #0003}#bench-container{margin-top:-5rem;position:relative}#bench{z-index:1;max-width:20rem;position:relative;bottom:0;left:50%;transform:translate(-50%)}#nav{justify-content:center;display:flex}#nav .prev,#nav .next{cursor:pointer;color:var(--color-brand);background:0 0;border:none;font-size:50px}#nav .prev:hover,#nav .next:hover{color:var(--color-blush)}@media (max-width:768px){#frame li figure img{max-width:225px;max-height:250px}#bench{max-width:40%}#nav .prev,#nav .next{margin:1rem 1rem 2rem;font-size:2em}}@media (max-width:480px){#gallery{height:90vh}#frame{margin-top:-.1rem;margin-bottom:.5rem;padding:0}#frame li{margin:1rem}#frame li figure img{max-width:200px;max-height:200px}#frame li figure figcaption{width:80%;font-size:10px;bottom:-20px;left:50%;transform:translate(-50%)}#bench-container{margin-top:-5rem}#bench{max-width:80vw}#nav .prev,#nav .next{font-size:24px}}