.carousel {
  width: min(calc(100vw - 16px), 800px);
  height: min(calc(100vh - 16x), 400px);
  border: 1px solid lightgray;
  overflow: hidden;
  resize: both;
  padding-bottom: 8px;

  & li {
    padding: 10px;
    list-style-type: none;
    display: inline-block;
    position: relative;
    aspect-ratio: 2 / 3;
    height: calc(100cqh - 20px);
    box-sizing: border-box;
    contain: size;

    & > figure {
      width: 100%;
      height: 100%;
      overflow: hidden;
      overflow: clip;
      margin: 0;
      position: relative;

      & > img {
        height: 100%;
      }
      & > figcaption {
        position: absolute;
        font-size: 2em;
        color:white;
        bottom: 0;
        width: 100%;
        padding: 10px;
        box-sizing: border-box;
        text-align: center;
      }
    }
  }
}

html {
  font-family: system-ui, sans;
}

body {
  display: grid;
  place-content: center;
}

h1,h2,h3 {
  text-wrap: balance;
}

p {
  max-inline-size: 60ch;
  text-wrap: pretty;
}

pre {
  min-width: 0;
  max-width: 100vw;
  overflow: auto;
}