:root {
  --space: 1rem;
  --text: #f8fafc;
  --surface-1: #020617;
  --surface-2: #0f172a;
  --surface-3: #1e293b;
  --surface-4: #334155;
  --btn-bg: #1d4ed8;
  --gradient: linear-gradient(
    20deg,
    hsla(0 0% 0% / 0) 20%,
    hsla(0 0% 100% / 0.065) 120%
  );
}

* {
  box-sizing: border-box;
}

body {
  display: grid;
  align-items: center;
  min-height: 100vh;
  font-family: system-ui, sans-serif;
  line-height: 1.4;
  color: var(--text);
  background-color: var(--surface-1);
}

main {
  margin-block: 2rem;
  min-width: 0;
}

h2 {
  line-height: 1.2;
}

body {
  padding-inline: var(--space);
}

section {
  position: relative; /* Set relative positioning for absolute positioned arrow indicator pseudo elements */
}

section + section {
  margin-block-start: 3rem;
}

.row {
  list-style: none;
  display: flex;
  gap: 1rem;
  padding: var(--space);
  margin: calc(var(--space) * -1);
  inline-size: calc(100% + var(--space) * 2);
  overflow-x: scroll;
  overscroll-behavior-x: contain;
  scroll-timeline: --tl-row inline;
}

/* Enhance with scroll-driven arrow indicators when supported */
@supports (animation-timeline: --tl) {
  /* Detect scroll - https://www.bram.us/2023/09/16/solved-by-css-scroll-driven-animations-detect-if-an-element-can-scroll-or-not/ */
  .row {
    --opacity: var(--can-scroll) 1;

    animation: detect-scroll linear;
    animation-timeline: scroll(self inline);
  }

  @keyframes detect-scroll {
    from,
    to {
      --can-scroll: ;
    }
  }

  .row::before,
  .row::after {
    --range-start: var(--space);
    --range-end: calc(var(--range-start) * 4);

    /* Demo visual styles */
    background-color: var(--btn-bg);
    background-image: var(--gradient);
    border-radius: 0.125rem;
    display: grid;
    place-content: center;
    font-size: 0.9rem;
    width: 2em;
    aspect-ratio: 1;
    pointer-events: none;

    /* Positioning */
    position: absolute;
    top: 50%;
    translate: 0 -50%;
    z-index: 1;

    /* Animation */
    opacity: var(--opacity, 0);
    animation-fill-mode: both;
    animation-name: fade;
    animation-timeline: --tl-row;
  }

  .row::before {
    content: "←";
    left: 0;
    animation-range: var(--range-start) var(--range-end);
  }

  .row::after {
    --pull: -1;
    content: "→";
    right: 0;
    animation-direction: reverse;
    animation-range: calc(100% - var(--range-end))
      calc(100% - var(--range-start));
  }

  @keyframes fade {
    from {
      opacity: 0;
      translate: calc(50% * var(--pull, 1)) -50%;
    }
    to {
      opacity: 1;
      translate: 0 -50%;
    }
  }
}

.row li {
  flex: 0 0 calc(10rem + 5vw);
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--surface-3);
  background-color: var(--surface-2);
  background-image: var(--gradient);
  border-radius: 0.25rem;
  text-decoration: none;
}

@supports (scrollbar-color: auto) {
  .row {
    scrollbar-color: var(--surface-4) var(--surface-2);
    scrollbar-width: thin;
  }
}

@supports selector(::-webkit-scrollbar) {
  .row::-webkit-scrollbar {
    background: var(--surface-4);
  }
  .row::-webkit-scrollbar-thumb {
    background: var(--surface-2);
  }
}

/* Warning for unsupported browsers */
.warning {
  background: var(--surface-4);
  padding: 1rem;
  width: fit-content;
  border-radius: 0.2rem;
}

@supports (animation-timeline: --tl) {
  .warning {
    display: none;
  }
}

ul {
    list-style-type: none; /* Optional: removes bullets */
    padding: 0; /* Optional: removes default padding */
}

li {
    width: 200px; /* Set the desired width for the list item */
    height: 100px; /* Set the desired height for the list item */
    overflow: hidden; /* Ensures any overflow is hidden */
}

li img {
    width: 100%; /* Makes the image width 100% of the li */
    height: 100%; /* Makes the image height 100% of the li */
    object-fit: cover; /* Ensures the image covers the li without distortion */
}

:root {
  --space: 1rem;
  --text: #f8fafc;
  --surface-1: #020617;
  --surface-2: #0f172a;
  --surface-3: #1e293b;
  --surface-4: #334155;
  --btn-bg: #1d4ed8;
  --gradient: linear-gradient(
    20deg,
    hsla(0 0% 0% / 0) 20%,
    hsla(0 0% 100% / 0.065) 120%
  );
}

* {
  box-sizing: border-box;
}

body {
  display: grid;
  align-items: center;
  min-height: 100vh;
  font-family: system-ui, sans-serif;
  line-height: 1.4;
  color: var(--text);
  background-color: var(--surface-1);
  padding-inline: var(--space);
}

main {
  margin-block: 2rem;
  min-width: 0;
}

h2 {
  line-height: 1.2;
}

section {
  position: relative; /* Set relative positioning for absolute positioned arrow indicator pseudo elements */
}

.row {
  list-style: none;
  display: flex;
  gap: 1rem;
  padding: var(--space);
  margin: calc(var(--space) * -1);
  inline-size: calc(100% + var(--space) * 2);
  overflow-x: scroll;
  overscroll-behavior-x: contain;
}

.row li {
  flex: 0 0 calc(10rem + 5vw);
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--surface-3);
  background-color: var(--surface-2);
  background-image: var(--gradient);
  border-radius: 0.25rem;
  text-decoration: none;
}

li img {
  width: 100%; /* Makes the image width 100% of the li */
  height: 100%; /* Makes the image height 100% of the li */
  object-fit: cover; /* Ensures the image covers the li without distortion */
}

/* Scrollbar styles */
@supports (scrollbar-color: auto) {
  .row {
    scrollbar-color: var(--surface-4) var(--surface-2);
    scrollbar-width: thin;
  }
}

@supports selector(::-webkit-scrollbar) {
  .row::-webkit-scrollbar {
    background: var(--surface-4);
  }
  .row::-webkit-scrollbar-thumb {
    background: var(--surface-2);
  }
}