.hover-list {
  position: relative;
  color: var(--s2a-color-content-knockout);
  padding-block-end: var(--s2a-layout-md);
}

.hover-list-headline {
  border-block-start: 1px solid var(--s2a-color-transparent-white-32);
  color: var(--s2a-color-content-knockout);
  padding-block: var(--s2a-spacing-md);
}

.hover-list-items {
  list-style: none;
  margin: 0;
  padding: 0;
}

.hover-list-item {
  border-block-start: 1px solid var(--s2a-color-transparent-white-32);
  color: var(--s2a-color-content-knockout);
  display: flex;
  gap: var(--s2a-spacing-md);
  padding-block: var(--s2a-spacing-xl);
  transition: background 0.3s ease;

  &:first-child {
    border-block-start: none;
  }

  &:last-child {
    border-block-end: 1px solid var(--s2a-color-transparent-white-32);
  }

}

.hover-list-copy {
  align-items: flex-start;
  display: flex;
  flex: 1;
}

.hover-list-number {
  align-items: center;
  color: var(--s2a-color-content-knockout);
  display: flex;
  flex-shrink: 0;
  inline-size: var(--s2a-spacing-24);
}

.hover-list-text {
  flex: 1;
  letter-spacing: var(--s2a-font-letter-spacing-4xl);
  margin: 0;
}

.hover-list-media {
  align-self: flex-start;
  block-size: 81px;
  border-radius: var(--s2a-border-radius-sm);
  flex-shrink: 0;
  inline-size: 80px;
  overflow: hidden;
}

.hover-list-media picture,
.hover-list-media img {
  block-size: 100%;
  display: block;
  inline-size: 100%;
  object-fit: cover;
}

@media (width >= 768px) {
  .hover-list {
    display: flex;
    gap: var(--s2a-spacing-xs);
    padding-block: var(--s2a-layout-sm);
  }

  .hover-list-headline-wrapper {
    align-self: start;
    flex: 1;
  }

  .hover-list-headline {
    padding-block: var(--s2a-spacing-sm);
  }

  .hover-list-col {
    flex: 1;
  }

  .hover-list-item {
    gap: var(--s2a-spacing-lg);
    padding-block: var(--s2a-spacing-lg);

    &:first-child {
      border-block-start: 1px solid var(--s2a-color-transparent-white-32);
    }

    &:last-child {
      border-block-end: none;
    }
  }

  .hover-list-number {
    block-size: var(--s2a-spacing-20);
    padding-inline-start: var(--s2a-spacing-xs);
  }

  .hover-list-media {
    aspect-ratio: 1;
    block-size: auto;
    flex: 0 0 25%;
  }
}

@media (768px <= width < 1280px) {
  .hover-list-headline {
    position: sticky;
    top: 180px;
  }
}

@media (width < 1280px) {
  .hover-list-media {
    background: transparent;
    border: 0;
    display: block;
    inset: auto;
    margin: 0;
    padding: 0;
    position: static;
  }
}

@media (width >= 1280px) {
  .hover-list {
    padding-block: var(--s2a-layout-lg);
  }

  .hover-list-item {
    align-items: center;
    block-size: 100px;
    cursor: pointer;
    gap: var(--s2a-spacing-md);
    padding-block: 0;

    @media (hover: hover) {
      &:hover {
        background: var(--s2a-color-transparent-white-08);
      }
    }
  }

  .hover-list-number {
    block-size: var(--s2a-spacing-24);
    inline-size: var(--s2a-spacing-64);
    justify-content: center;
    padding-inline-start: 0;
  }

  .hover-list-media {
    background: transparent;
    block-size: 100vh;
    border: 0;
    inline-size: 100vw;
    inset: 0;
    margin: 0;
    overflow: visible;
    padding: 0;
    pointer-events: none;
    position: fixed;
  }

  .hover-list-media picture {
    block-size: 320px;
    border-radius: var(--s2a-border-radius-sm);
    inline-size: 280px;
    inset: auto;
    left: 0;
    overflow: hidden;
    pointer-events: none;
    position: absolute;
    top: 0;
    transform-origin: 50% 100%;
    will-change: transform, opacity;
  }
}