body {
  font-family: "GFS Didot", serif;
  background-color: #D982CD;
  text-align: center;

  cursor: url("cursor.png") 12 12, auto;

  overflow-anchor: none;
}

h1 {
  font-size: 8em;
  color: #89227D;
  text-shadow: 2px 2px #444400;
}

p {
  font-size: 2em;
}

h2 {
  font-size: 4em;
  color: #89227D;
  text-shadow: 2px 2px #444400;
}

.stuck-top {
  container-name: scroller;
  container-type: scroll-state;
  position: sticky;
  top: 20px;

  > div {
    background: var(--surface-docment);

    transition: all .3s ease-in-out;

    @container scroll-state(stuck: top) {
      background: #F9A2ED;
      box-shadow: 0px 2px 1px 2px #89227D;
      border-radius: 10px;
      margin-inline: 20px;
    }
  }
}

.carousel-layout {
  display: grid;
  grid-template-columns: auto 1fr auto;

  .carousel {
    grid-area: scroll;
  }
}

.carousel {
  overflow-x: auto;
  scroll-snap-align: x mandatory;
  overscroll-behavior-x: contain;

  @media (prefers-reduced-motion: no-preference) {
    scroll-behavior: smooth;
  }

  > li {
    scroll-snap-align: center;
  }
}

/* .photos {
  display: grid;
  grid: 50cqmin / auto-flow 50cqmin;
  gap: 15px;
  padding: 30px;
  margin: 0;

  @container scroll-state(stuck: top) {
     grid: 25cqmin / auto-flow 25cqmin;
     transition: all 3s ease-in-out;
  } 

  > li {
    list-style-type: none;
    border: 3px solid #444400;
    background: white;
  }

  > li:hover {
    border: 10px solid #89227D;
    background: #F9A2ED;
    transition: all .3s ease-in-out;
  }
} */

.photos {
  display: flex;
  gap: 15px;
  padding: 30px;
  margin: 0;
  height: 50vh;

  @container scroll-state(stuck: top) {
     height: 25vh;
     transition: all .3s ease-in-out;
  } 

  > li {
    list-style-type: none;
    border: 3px solid #444400;
    background: white;
  }

  > li:hover {
    border: 10px solid #89227D;
    background: #F9A2ED;
    transition: all .3s ease-in-out;
  }
}

/* .photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.empty {
  min-height: 25vh;
} */

.photo {
  height: 100%;
  /* height: 100%; */
  object-fit: cover;
}

.empty {
  min-height: 25vh;
}