media-scroller/style.css
:root {
  --sm-space: 1rem;
  --md-space: 2rem;
}

html {
  block-size: 100%;
}

body {
  min-block-size: 100%;
  box-sizing: border-box;
  margin: 0;

  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--md-space);
  padding-block-start: calc(var(--md-space) * 2);
  padding-block-end: var(--md-space);

  font-family: system-ui, sans-serif;
}

section {
  --gap: var(--md-space);

  display: grid;
  gap: var(--gap);

  & > header {
    padding-inline-start: var(--gap);
    padding-inline-end: var(--gap);

    display: grid;
    gap: calc(var(--sm-space) / 2);

    & > :is(h2,h3) {
      margin: 0;
    }
  }
}

.horizontal-media-scroller {
  --size: 150px;

  display: grid;
  grid-auto-flow: column;
  gap: calc(var(--gap) / 2);
  margin: 0;

  padding-inline-start: var(--gap);
  padding-inline-end: var(--gap);
  padding-block-start: calc(var(--gap) / 2);
  padding-block-end: calc(var(--gap) / 2);

  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline mandatory;
  scroll-padding-left: var(--gap);
  scroll-padding-right: var(--gap);
  scroll-padding-inline: var(--gap);

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

  & > li {
    display: inline-block;

    /*  container padding fix  */
    &:last-of-type figure {
      position: relative;

      &::after {
        content: "";
        position: absolute;

        inline-size: var(--gap);
        block-size: 100%;

        inset-block-start: 0;
        inset-inline-end: calc(var(--gap) * -1);
      }
    }
  }

  & figure {
    scroll-snap-align: start;
  }

  & a {
    display: inline-block;
    text-decoration: none;
    color: inherit;
    outline-offset: 12px;

    &:focus {
      outline-offset: 7px;
    }

    @media (prefers-reduced-motion: no-preference) {
      & {
        transition: outline-offset .25s ease;
      }
    }
  }
}

figure {
  display: grid;
  gap: calc(var(--gap) / 2);
  margin: 0;

  cursor: pointer;
  user-select: none;

  @media (prefers-reduced-data: reduce) {
    & {
      min-inline-size: var(--size);

      & > picture {
        display: none;
      }
    }
  }

  & > picture {
    inline-size: var(--size);
    block-size: var(--size);
  }

  & img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;

    border-radius: 1ex;
    overflow: hidden;

    background-image: 
      linear-gradient(
        to bottom, 
        hsl(0 0% 40%), 
        hsl(0 0% 20%)
      );
  }

  & > figcaption {
    font-size: 1.75rem;
    font-weight: 300;
    word-break: break-word;
    font-family: "blokk";
  }
}

h2 {
  font-size: var(--md-space);
  font-weight: 800;
  letter-spacing: .75px;
}

h3 {
  font-weight: 400;
  letter-spacing: .75px;
}

@supports (aspect-ratio: 1) {
  .horizontal-media-scroller figure > picture {
    inline-size: auto;
    aspect-ratio: 1;

    @nest section:nth-child(2) & {
      aspect-ratio: 16/9;  
    }

    @nest section:nth-child(3) & {
      block-size: calc(var(--size) * 2);
      aspect-ratio: 4/3;

      @media (width <= 480px) {
        block-size: calc(var(--size) * 1.5);
      }
    }
  }
}

.github-corner {
  fill: CanvasText;
  color: Canvas; 
  
  &:hover .octo-arm {
    animation: octocat-wave 560ms ease-in-out
  }
}

@keyframes octocat-wave{
  0%,100% {
    transform: rotate(0)
  }
  20%,60% {
    transform: rotate(-25deg)
  }
  40%,80% {
    transform: rotate(10deg)
  }
}