<section class="palette">
  <div
    class="swatch"
    data-name="Azalea"
    data-code="#CD2F7B"
    style="background-color: #CD2F7B;">
  </div>
  <div
    class="swatch dark-text"
    data-name="Pink"
    data-code="#FFAFA5"
    style="background-color: #FFAFA5;">
  </div>
  <div
    class="swatch"
    data-name="Crimson"
    data-code="#9B0032"
    style="background-color: #9B0032;">
  </div>
  <div
    class="swatch dark-text"
    data-name="Sunset"
    data-code="#FA551E"
    style="background-color: #FA551E;">
  </div>
  <div
    class="swatch"
    data-name="Rust"
    data-code="#BE4B0A"
    style="background-color: #BE4B0A;">
  </div>
  <div
    class="swatch dark-text"
    data-name="Tangerine"
    data-code="#FF8C19"
    style="background-color: #FF8C19;">
  </div>
  <div
    class="swatch"
    data-name="Gold"
    data-code="#9B6400"
    style="background-color: #9B6400;">
  </div>
  <div
    class="swatch dark-text"
    data-name="Vivid Vargos"
    data-code="#FAD24B"
    style="background-color: #FAD24B;">
  </div>
  <div
    class="swatch"
    data-name="Canopy"
    data-code="#0F503C"
    style="background-color: #0F503C;">
  </div>
  <div
    class="swatch dark-text"
    data-name="Lime"
    data-code="#B4DC19"
    style="background-color: #B4DC19;">
  </div>
  <div
    class="swatch"
    data-name="Ocean"
    data-code="#007891"
    style="background-color: #007891;">
  </div>
  <div
    class="swatch dark-text"
    data-name="Zen"
    data-code="#14C8EB"
    style="background-color: #14C8EB;">
  </div>
  <div
    class="swatch"
    data-name="Navy"
    data-code="#283750"
    style="background-color: #283750;">
  </div>
  <div
    class="swatch dark-text"
    data-name="Cloud"
    data-code="#B4C8E1"
    style="background-color: #B4C8E1;">
  </div>
  <div
    class="swatch"
    data-name="Plum"
    data-code="#78286E"
    style="background-color: #78286E;">
  </div>
  <div
    class="swatch dark-text"
    data-name="Orchid"
    data-code="#C8AFF0"
    style="background-color: #C8AFF0;">
  </div>
</section>

html {
  block-size: 100%;
}

body {
  align-content: center;
  block-size: 100%;
  box-sizing: border-box;
  font-family: -apple-system, sans-serif;
  margin: 0;
  padding: 80px;
}

.palette {
  block-size: 70px;
  display: flex;
  overflow: hidden;
  min-inline-size: calc(160px * 6);
  padding: 110px 8px 0 8px;
}

.swatch {
  border-radius: 20px;
  block-size: 140px;
  color: #ffffff;
  display: flex;
  flex-basis: 100%;
  font-weight: 500;
  justify-content: space-between;
  padding: 24px;
  position: relative;
  transition: transform 0.3s ease;
  
  &:is(.dark-text) {
    color: #1e1919;
  }

  &::before,
  &::after {
    opacity: var(--text-opacity, 0);
    transition: opacity 0.3s ease;
  }

  &::before {
    content: attr(data-name);
    font-size: 16px;
    line-height: 24px;
  }

  &::after {
    content: attr(data-code);
    font-size: 12px;
    line-height: 20px;
  }

  & + .swatch {
    margin-inline-start: -20%;
  }

  &:hover {
    --text-opacity: 1;
    transform: translateY(-50%) rotateZ(-1.5deg);
  }

  /* One swatch before hover */
  &:has(+ &:hover) {
    transform: translateY(-30%) rotateZ(-1deg);
  }
  
  /* Two swatches before hover */
  &:has(+ & + &:hover),
  /* One swatch after hover */
  &:where(&:hover + &) {
    transform: translateY(-10%) rotateZ(-0.5deg);
  }
}