<ul>
  <!-- Define a variant variable on each card with a specific value -->
  <li style='--variant: teal'>
    <div class='poster'>
      <img src='https://i.scdn.co/image/ab6761610000e5ebec01c52d6030a1574070e308' />
      <span>Daily Mix 1</span>
    </div>
    <h3>Daily Mix 1</h3>
    <p>Slipknot, Red Hot Chili Peppers, Avenged Sevenfold</p>
  </li>
  <li style='--variant: cream'>
    <div class='poster'>
      <img src='https://i.scdn.co/image/86da45ccaed25f5519666412561f53007331442a' />
      <span>Daily Mix 2</span>
    </div>
    <h3>Daily Mix 2</h3>
    <p>Pantera, Jim Morrison, The Doors and more</p>
  </li>
  <li style='--variant: mint'>
    <div class='poster'>
      <img src='https://i.scdn.co/image/ab6761610000e5eb0accbbe13e1aa147dd27671c' />
      <span>Daily Mix 3</span>
    </div>
    <h3>Daily Mix 3</h3>
    <p>Muse, Royal Blood, Arctic Monkeys and more</p>
  </li>
  <li style='--variant: pink'>
    <div class='poster'>
      <img src='https://i.scdn.co/image/ab6761610000e5eb681c2ca7f2625b5f6182a735' />
      <span>Daily Mix 4</span>
    </div>
    <h3>Daily Mix 4</h3>
    <p>The Midnight, Waveshaper, The Last Concorde and more</p>
  </li>
  <li style='--variant: yellow'>
    <div class='poster'>
      <img src='https://i.scdn.co/image/d011c95081cd9a329e506abd7ded47535d524a07' />
      <span>Daily Mix 5</span>
    </div>
    <h3>Daily Mix 5</h3>
    <p>Pink Floyd, Foreigner, Journey and more</p>
  </li>
  <li style='--variant: sky'>
    <div class='poster'>
      <img src='https://i.scdn.co/image/ab6761610000e5ebdd353edbce04267bff979de6' />
      <span>Daily Mix 6</span>
    </div>
    <h3>Daily Mix 6</h3>
    <p>Polyphia, Animals As Leaders, Plini and more</p>
  </li>
</ul>

body {
  background: #121212;
  font-family: system-ui, sans-serif;
}

ul {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  list-style: none;

  & li {
    background: #181818;
    border-radius: 6px;
    overflow: hidden;
    transition: background 200ms ease-out;
    padding: 16px;
    width: 150px;

    &:hover {
      background: #282828;
    }

    & .poster {
      position: relative;
      margin-bottom: 16px;

      &::after {
        position: absolute;
        border-radius: 4px;
        overflow: hidden;
        inset: 0;
        width: 150px;
        height: 150px;
      }

      & img {
        border-radius: 4px;
        width: 150px;
        height: 150px;
        object-fit: cover;
      }

      & span {
        position: absolute;
        bottom: 16px;
        left: 14px;
        font-weight: bold;
        z-index: 10;
      }
    }

    & h3 {
      color: white;
      font-size: 16px;
      line-height: 25.6px;
      margin: 0;
    }

    & p {
      color: #a7a7a7;
      font-size: 14px;
      line-height: 22.4px;
      margin: 0;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
  }
}

/* Query the container on the specific value of the variant variable */
@container style(--variant: teal) {
  /* In the case of the 'teal' variant, add this specific overlay to the poster */
  .poster::after {
    content: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTUwIiBoZWlnaHQ9IjE1MCIgdmlld0JveD0iMCAwIDE1MCAxNTAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0xMDcuMzQ0IDBDMTA3LjM0NCAwIDk2LjMyODEgMTYuNDA2MiA3NS40Njg3IDE4LjI4MTJDNjEuNzc2NSAxOC4yODEyIDU0LjU5OTIgMTQuNjQ3OSA0OC42MjU2IDExLjYyMzhDNDMuMDQ0NiA4Ljc5ODUxIDM4LjUxNDIgNi41MDUwNiAzMC43MDMxIDguMjAzMTJDMTcuMDI5NCAxMS4xNzU3IDEyLjk3MDkgMjYuMTkxNiA5LjIzNDgyIDQwLjAxNDdDNi44Mzk5NiA0OC44NzU1IDQuNTc3NTUgNTcuMjQ2MiAtMS41MjU4OGUtMDUgNjEuNjQwNlYwSDEwNy4zNDRaIiBmaWxsPSIjOEVGMERDIiBmaWxsLW9wYWNpdHk9IjAuOTMiLz4KPHBhdGggZD0iTS05LjUzNjc0ZS0wNyAxMDcuMzQ0VjE1MEgxNTBWMTIyLjEwOUMxNTAgMTIyLjEwOSAxMjcuOTY5IDEzMy4xMjUgMTA4LjUxNiAxMjBDMTAyLjkxNSAxMTYuMjIxIDk3Ljk1NjEgMTExLjcyNCA5My4wMDU5IDEwNy4yMzVDODAuNzYxMiA5Ni4xMzE1IDY4LjU3MjIgODUuMDc4MSA0Ni44NzUgODUuMDc4MUMzNC4yMTgzIDg1LjA3ODEgMjUuMzAzOCA5MS4zODU3IDE2LjUxMTcgOTcuNjA2N0MxMS4yMjU4IDEwMS4zNDcgNS45ODQwOSAxMDUuMDU2IC05LjUzNjc0ZS0wNyAxMDcuMzQ0WiIgZmlsbD0iIzhFRjBEQyIgZmlsbC1vcGFjaXR5PSIwLjkzIi8+CjxwYXRoIGQ9Ik0xMS4yNSA1LjYyNUM4LjE0MzI4IDUuNjI1IDUuNjI0OTggOC4xNDMzIDUuNjI0OTggMTEuMjVDNS42MjQ5OCAxNC4zNTY3IDguMTQzMjggMTYuODc1IDExLjI1IDE2Ljg3NUMxNC4zNTY3IDE2Ljg3NSAxNi44NzUgMTQuMzU2NyAxNi44NzUgMTEuMjVDMTYuODc1IDguMTQzNjggMTQuMzU2NyA1LjYyNTM4IDExLjI1IDUuNjI1Wk0xMy44Mjk3IDEzLjczNzZDMTMuNzI4NyAxMy45MDM0IDEzLjUxMjcgMTMuOTU1MiAxMy4zNDc2IDEzLjg1NDNDMTIuMDI2OSAxMy4wNDcxIDEwLjM2NDEgMTIuODY0OCA4LjQwNjIgMTMuMzExOUM4LjIxNzM2IDEzLjM1NTMgOC4wMjkyOCAxMy4yMzcxIDcuOTg2MjkgMTMuMDQ4MkM3Ljk0MjkyIDEyLjg1OTQgOC4wNjA3NiAxMi42NzEzIDguMjQ5OTggMTIuNjI4M0MxMC4zOTI1IDEyLjEzODkgMTIuMjMwNyAxMi4zNDk3IDEzLjcxMzQgMTMuMjU1NUMxMy44Nzg0IDEzLjM1NzIgMTMuOTMxIDEzLjU3MjUgMTMuODI5NyAxMy43Mzc2Wk0xNC41MTc5IDEyLjIwNjVDMTQuMzkwOCAxMi40MTMgMTQuMTIwNiAxMi40Nzc1IDEzLjkxNDUgMTIuMzUwOEMxMi40MDMgMTEuNDIxNiAxMC4wOTc3IDExLjE1MjUgOC4zMDk0OCAxMS42OTUyQzguMDc3NjUgMTEuNzY1NSA3LjgzMjc2IDExLjYzNDYgNy43NjIxNCAxMS40MDMxQzcuNjkyMjggMTEuMTcxMyA3LjgyMzE3IDEwLjkyNjggOC4wNTQ2MiAxMC44NTYyQzEwLjA5NzMgMTAuMjM2MyAxMi42MzcxIDEwLjUzNjUgMTQuMzczMiAxMS42MDM1QzE0LjU3OTcgMTEuNzMwNiAxNC42NDQ5IDEyLjAwMDQgMTQuNTE3OSAxMi4yMDY1Wk0xNC41NzcgMTAuNjExM0MxMi43NjM4IDkuNTM0NjcgOS43NzMwMSA5LjQzNTY0IDguMDQxOTUgOS45NjA3MkM3Ljc2NDA2IDEwLjA0NTIgNy40NzAwNSA5Ljg4ODE4IDcuMzg1OTkgOS42MTAyOUM3LjMwMTkzIDkuMzMyNCA3LjQ1ODUzIDkuMDM4MzggNy43MzY4MSA4Ljk1Mzk0QzkuNzIzODggOC4zNTA5NSAxMy4wMjY3IDguNDY3MjUgMTUuMTE0IDkuNzA2MjRDMTUuMzYzOSA5Ljg1NDc5IDE1LjQ0NiAxMC4xNzc2IDE1LjI5NzggMTAuNDI3MUMxNS4xNTAxIDEwLjY3NzMgMTQuODI2NSAxMC43NTk5IDE0LjU3NyAxMC42MTEzWiIgZmlsbD0iIzA0MDAwMSIvPgo8L3N2Zz4K");
  }
}

@container style(--variant: cream) {
  .poster::after {
    content: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTUwIiBoZWlnaHQ9IjE1MCIgdmlld0JveD0iMCAwIDE1MCAxNTAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0wLjAwMDEwNjA5NiAzNC41TDkuMTU1MjdlLTA1IDBIOTAuNTAwMUM5MC41MDAxIDAgNzcuMDAwMSAxOCA2MC4wMDAxIDIwLjVDNDUuMjYxIDIyLjY2NzUgMzEuMDAwMSA5LjUgMjIuNTAwMSAxMy41QzExLjYyNDggMTguNjE3OCAxMi41MDAxIDI1IDAuMDAwMTA2MDk2IDM0LjVaIiBmaWxsPSIjRkZEN0QxIiBmaWxsLW9wYWNpdHk9IjAuOTMiLz4KPHBhdGggZD0iTTAuMDAwMTA2MDk2IDk4VjE1MEgxNTBWMTI4LjVDMTI4IDEyMCAxMjggMTA1LjUgMTEzLjUgOTcuNUM5OSA4OS41IDkxLjUgMTAxIDc3IDEwMUM2Mi41IDEwMSA1MSA4OC4xMDM0IDM2IDg1QzIxIDgxLjg5NjYgMTAuNTAwMSA5NCAwLjAwMDEwNjA5NiA5OFoiIGZpbGw9IiNGRkQ3RDEiIGZpbGwtb3BhY2l0eT0iMC45MyIvPgo8cGF0aCBkPSJNMTEgNUM3LjY4NjE4IDUgNSA3LjY4NjE4IDUgMTFDNSAxNC4zMTM4IDcuNjg2MTggMTcgMTEgMTdDMTQuMzEzOCAxNyAxNyAxNC4zMTM4IDE3IDExQzE3IDcuNjg2NTkgMTQuMzEzOCA1LjAwMDQxIDExIDVaTTEzLjc1MTcgMTMuNjUzNEMxMy42NDQgMTMuODMwMyAxMy40MTM1IDEzLjg4NTYgMTMuMjM3NSAxMy43Nzc5QzExLjgyODcgMTIuOTE2OSAxMC4wNTUxIDEyLjcyMjQgNy45NjY2MyAxMy4xOTk0QzcuNzY1MiAxMy4yNDU2IDcuNTY0NTkgMTMuMTE5NSA3LjUxODczIDEyLjkxODFDNy40NzI0NyAxMi43MTY3IDcuNTk4MTYgMTIuNTE2MSA3LjggMTIuNDcwMkMxMC4wODU0IDExLjk0ODIgMTIuMDQ2MSAxMi4xNzMgMTMuNjI3NiAxMy4xMzkyQzEzLjgwMzcgMTMuMjQ3NyAxMy44NTk4IDEzLjQ3NzQgMTMuNzUxNyAxMy42NTM0Wk0xNC40ODU4IDEyLjAyMDNDMTQuMzUwMyAxMi4yNDA1IDE0LjA2MiAxMi4zMDkzIDEzLjg0MjIgMTIuMTc0MkMxMi4yMjk5IDExLjE4MyA5Ljc3MDkzIDEwLjg5NiA3Ljg2MzQ2IDExLjQ3NDlDNy42MTYxNyAxMS41NDk4IDcuMzU0OTYgMTEuNDEwMiA3LjI3OTYzIDExLjE2MzRDNy4yMDUxMiAxMC45MTYxIDcuMzQ0NzMgMTAuNjU1MyA3LjU5MTYxIDEwLjU3OTlDOS43NzA1MiA5LjkxODczIDEyLjQ3OTYgMTAuMjM4OSAxNC4zMzE0IDExLjM3NzFDMTQuNTUxNyAxMS41MTI2IDE0LjYyMTMgMTEuODAwNCAxNC40ODU4IDEyLjAyMDNaTTE0LjU0ODggMTAuMzE4N0MxMi42MTQ3IDkuMTcwMzIgOS40MjQ1NiA5LjA2NDY5IDcuNTc4MSA5LjYyNDc3QzcuMjgxNjggOS43MTQ4NCA2Ljk2ODA3IDkuNTQ3MzkgNi44Nzg0IDkuMjUwOTdDNi43ODg3NCA4Ljk1NDU1IDYuOTU1NzggOC42NDA5NCA3LjI1MjYxIDguNTUwODdDOS4zNzIxNiA3LjkwNzY4IDEyLjg5NTIgOC4wMzE3MyAxNS4xMjE2IDkuMzUzMzNDMTUuMzg4MSA5LjUxMTc3IDE1LjQ3NTcgOS44NTYwOSAxNS4zMTc3IDEwLjEyMjJDMTUuMTYwMSAxMC4zODkyIDE0LjgxNDkgMTAuNDc3MiAxNC41NDg4IDEwLjMxODdaIiBmaWxsPSIjMDQwMDAxIi8+Cjwvc3ZnPgo=");
  }
}

@container style(--variant: mint) {
  .poster::after {
    content: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTUwIiBoZWlnaHQ9IjE1MCIgdmlld0JveD0iMCAwIDE1MCAxNTAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0wIDI4LjVWMEg5M0M3NC41IDE1IDU3LjgxIDEuNjU3NTIgNDAuNSA5LjVDMjcuMzcwOSAxNS40NDgzIDI2Ljc5NjIgMjcuNjYzMSAxMi41IDI5LjVDNi42NzcgMzAuMjQ4MiA1IDI5LjUgMCAyOC41WiIgZmlsbD0iI0M4REVCQiIgZmlsbC1vcGFjaXR5PSIwLjkzIi8+CjxwYXRoIGQ9Ik0wIDc2TDEuNDU0MzVlLTA1IDE1MEgxNTBWMTI0QzE0MSAxMjUuNSAxMzguOTE5IDEyNS45MzEgMTMzLjUgMTI1QzEwMS41IDExOS41IDkxLjUgOTEgNzAuNSA5MEM0OS41IDg5IDQ4IDk5LjUgMzUuNSA5OS41QzIzIDk5LjUgMTYgODEuNSAwIDc2WiIgZmlsbD0iI0M4REVCQiIgZmlsbC1vcGFjaXR5PSIwLjkzIi8+CjxwYXRoIGQ9Ik0xMC45OTk5IDVDNy42ODYwNiA1IDQuOTk5ODggNy42ODYxOCA0Ljk5OTg4IDExQzQuOTk5ODggMTQuMzEzOCA3LjY4NjA2IDE3IDEwLjk5OTkgMTdDMTQuMzEzNyAxNyAxNi45OTk5IDE0LjMxMzggMTYuOTk5OSAxMUMxNi45OTk5IDcuNjg2NTkgMTQuMzEzNyA1LjAwMDQxIDEwLjk5OTkgNVpNMTMuNzUxNiAxMy42NTM0QzEzLjY0MzkgMTMuODMwMyAxMy40MTM0IDEzLjg4NTYgMTMuMjM3MyAxMy43Nzc5QzExLjgyODUgMTIuOTE2OSAxMC4wNTQ5IDEyLjcyMjQgNy45NjY1MSAxMy4xOTk0QzcuNzY1MDggMTMuMjQ1NiA3LjU2NDQ2IDEzLjExOTUgNy41MTg2MSAxMi45MTgxQzcuNDcyMzQgMTIuNzE2NyA3LjU5ODA0IDEyLjUxNjEgNy43OTk4OCAxMi40NzAyQzEwLjA4NTIgMTEuOTQ4MiAxMi4wNDU5IDEyLjE3MyAxMy42Mjc1IDEzLjEzOTJDMTMuODAzNiAxMy4yNDc3IDEzLjg1OTcgMTMuNDc3NCAxMy43NTE2IDEzLjY1MzRaTTE0LjQ4NTcgMTIuMDIwM0MxNC4zNTAxIDEyLjI0MDUgMTQuMDYxOSAxMi4zMDkzIDEzLjg0MiAxMi4xNzQyQzEyLjIyOTggMTEuMTgzIDkuNzcwODEgMTAuODk2IDcuODYzMzQgMTEuNDc0OUM3LjYxNjA1IDExLjU0OTggNy4zNTQ4NCAxMS40MTAyIDcuMjc5NTEgMTEuMTYzNEM3LjIwNSAxMC45MTYxIDcuMzQ0NjEgMTAuNjU1MyA3LjU5MTQ4IDEwLjU3OTlDOS43NzA0IDkuOTE4NzMgMTIuNDc5NSAxMC4yMzg5IDE0LjMzMTMgMTEuMzc3MUMxNC41NTE2IDExLjUxMjYgMTQuNjIxMiAxMS44MDA0IDE0LjQ4NTcgMTIuMDIwM1pNMTQuNTQ4NyAxMC4zMTg3QzEyLjYxNDYgOS4xNzAzMiA5LjQyNDQ0IDkuMDY0NjkgNy41Nzc5NyA5LjYyNDc3QzcuMjgxNTYgOS43MTQ4NCA2Ljk2Nzk0IDkuNTQ3MzkgNi44NzgyOCA5LjI1MDk3QzYuNzg4NjIgOC45NTQ1NSA2Ljk1NTY2IDguNjQwOTQgNy4yNTI0OSA4LjU1MDg3QzkuMzcyMDQgNy45MDc2OCAxMi44OTUxIDguMDMxNzMgMTUuMTIxNSA5LjM1MzMzQzE1LjM4OCA5LjUxMTc3IDE1LjQ3NTYgOS44NTYwOSAxNS4zMTc2IDEwLjEyMjJDMTUuMTYgMTAuMzg5MiAxNC44MTQ4IDEwLjQ3NzIgMTQuNTQ4NyAxMC4zMTg3WiIgZmlsbD0iIzA0MDAwMSIvPgo8L3N2Zz4K");
  }
}

@container style(--variant: pink) {
  .poster::after {
    content: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTUwIiBoZWlnaHQ9IjE1MCIgdmlld0JveD0iMCAwIDE1MCAxNTAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0wIDU0LjVWMEg5MkM4OCAzLjUgODYgMTIgNzQuNSAxMkM2MC41IDEyIDUzIDQuODgyMzUgMzAgMTNDMiAyMi44ODI0IDEyIDQzIDAgNTQuNVoiIGZpbGw9IiNGRjhEQjIiIGZpbGwtb3BhY2l0eT0iMC45MyIvPgo8cGF0aCBkPSJNMCA5MC41TDEuNDMwNTFlLTA1IDE1MEgxNTBWOTZDMTMyIDEwMS41IDEyNi41IDExMCAxMDcuNSAxMDkuNUM3Ni40NzQ1IDEwOC42ODQgNzUgODAuNjExMSA0Ni41IDc4LjVDMjYuOTUxMyA3Ny4wNTE5IDEyLjUgODYuNSAwIDkwLjVaIiBmaWxsPSIjRkY4REIyIiBmaWxsLW9wYWNpdHk9IjAuOTMiLz4KPHBhdGggZD0iTTEwLjk5OTkgNUM3LjY4NjA2IDUgNC45OTk4OCA3LjY4NjE4IDQuOTk5ODggMTFDNC45OTk4OCAxNC4zMTM4IDcuNjg2MDYgMTcgMTAuOTk5OSAxN0MxNC4zMTM3IDE3IDE2Ljk5OTkgMTQuMzEzOCAxNi45OTk5IDExQzE2Ljk5OTkgNy42ODY1OSAxNC4zMTM3IDUuMDAwNDEgMTAuOTk5OSA1Wk0xMy43NTE2IDEzLjY1MzRDMTMuNjQzOSAxMy44MzAzIDEzLjQxMzQgMTMuODg1NiAxMy4yMzczIDEzLjc3NzlDMTEuODI4NSAxMi45MTY5IDEwLjA1NDkgMTIuNzIyNCA3Ljk2NjUxIDEzLjE5OTRDNy43NjUwOCAxMy4yNDU2IDcuNTY0NDYgMTMuMTE5NSA3LjUxODYxIDEyLjkxODFDNy40NzIzNCAxMi43MTY3IDcuNTk4MDQgMTIuNTE2MSA3Ljc5OTg4IDEyLjQ3MDJDMTAuMDg1MiAxMS45NDgyIDEyLjA0NTkgMTIuMTczIDEzLjYyNzUgMTMuMTM5MkMxMy44MDM2IDEzLjI0NzcgMTMuODU5NyAxMy40Nzc0IDEzLjc1MTYgMTMuNjUzNFpNMTQuNDg1NyAxMi4wMjAzQzE0LjM1MDEgMTIuMjQwNSAxNC4wNjE5IDEyLjMwOTMgMTMuODQyIDEyLjE3NDJDMTIuMjI5OCAxMS4xODMgOS43NzA4MSAxMC44OTYgNy44NjMzNCAxMS40NzQ5QzcuNjE2MDUgMTEuNTQ5OCA3LjM1NDg0IDExLjQxMDIgNy4yNzk1MSAxMS4xNjM0QzcuMjA1IDEwLjkxNjEgNy4zNDQ2MSAxMC42NTUzIDcuNTkxNDggMTAuNTc5OUM5Ljc3MDQgOS45MTg3MyAxMi40Nzk1IDEwLjIzODkgMTQuMzMxMyAxMS4zNzcxQzE0LjU1MTYgMTEuNTEyNiAxNC42MjEyIDExLjgwMDQgMTQuNDg1NyAxMi4wMjAzWk0xNC41NDg3IDEwLjMxODdDMTIuNjE0NiA5LjE3MDMyIDkuNDI0NDQgOS4wNjQ2OSA3LjU3Nzk3IDkuNjI0NzdDNy4yODE1NiA5LjcxNDg0IDYuOTY3OTQgOS41NDczOSA2Ljg3ODI4IDkuMjUwOTdDNi43ODg2MiA4Ljk1NDU1IDYuOTU1NjYgOC42NDA5NCA3LjI1MjQ5IDguNTUwODdDOS4zNzIwNCA3LjkwNzY4IDEyLjg5NTEgOC4wMzE3MyAxNS4xMjE1IDkuMzUzMzNDMTUuMzg4IDkuNTExNzcgMTUuNDc1NiA5Ljg1NjA5IDE1LjMxNzYgMTAuMTIyMkMxNS4xNiAxMC4zODkyIDE0LjgxNDggMTAuNDc3MiAxNC41NDg3IDEwLjMxODdaIiBmaWxsPSIjMDQwMDAxIi8+Cjwvc3ZnPgo=");
  }
}

@container style(--variant: yellow) {
  .poster::after {
    content: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTUwIiBoZWlnaHQ9IjE1MCIgdmlld0JveD0iMCAwIDE1MCAxNTAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0wIDQ1LjVWMEgxMDVDMTAxIDMuNSA5MSAxMC41IDgwLjUgMTAuNUM2NC41IDEwLjUgNjIgMi44Njc2NSA0MS41IDkuNUMyNC41IDE1IDIyLjUgMzggMCA0NS41WiIgZmlsbD0iI0ZGRDY4MiIgZmlsbC1vcGFjaXR5PSIwLjkzIi8+CjxwYXRoIGQ9Ik0wIDgxLjVMMS40MzA1MWUtMDUgMTUwSDE1MFYxMjBDMTM1IDEyNCAxMjMgMTIwLjUgMTE4LjUgMTE5LjVDOTEgMTEzLjM4OSA3OS43OTEyIDk1IDY2IDkxLjVDNTMuNSA4OC4zMjc3IDUxLjI1MjQgOTcgMzUgOTdDMjUuNSA5NyAxOCA4OS41IDAgODEuNVoiIGZpbGw9IiNGRkQ2ODIiIGZpbGwtb3BhY2l0eT0iMC45MyIvPgo8cGF0aCBkPSJNMTAuOTk5OSA1QzcuNjg2MDYgNSA0Ljk5OTg4IDcuNjg2MTggNC45OTk4OCAxMUM0Ljk5OTg4IDE0LjMxMzggNy42ODYwNiAxNyAxMC45OTk5IDE3QzE0LjMxMzcgMTcgMTYuOTk5OSAxNC4zMTM4IDE2Ljk5OTkgMTFDMTYuOTk5OSA3LjY4NjU5IDE0LjMxMzcgNS4wMDA0MSAxMC45OTk5IDVaTTEzLjc1MTYgMTMuNjUzNEMxMy42NDM5IDEzLjgzMDMgMTMuNDEzNCAxMy44ODU2IDEzLjIzNzMgMTMuNzc3OUMxMS44Mjg1IDEyLjkxNjkgMTAuMDU0OSAxMi43MjI0IDcuOTY2NTEgMTMuMTk5NEM3Ljc2NTA4IDEzLjI0NTYgNy41NjQ0NiAxMy4xMTk1IDcuNTE4NjEgMTIuOTE4MUM3LjQ3MjM0IDEyLjcxNjcgNy41OTgwNCAxMi41MTYxIDcuNzk5ODggMTIuNDcwMkMxMC4wODUyIDExLjk0ODIgMTIuMDQ1OSAxMi4xNzMgMTMuNjI3NSAxMy4xMzkyQzEzLjgwMzYgMTMuMjQ3NyAxMy44NTk3IDEzLjQ3NzQgMTMuNzUxNiAxMy42NTM0Wk0xNC40ODU3IDEyLjAyMDNDMTQuMzUwMSAxMi4yNDA1IDE0LjA2MTkgMTIuMzA5MyAxMy44NDIgMTIuMTc0MkMxMi4yMjk4IDExLjE4MyA5Ljc3MDgxIDEwLjg5NiA3Ljg2MzM0IDExLjQ3NDlDNy42MTYwNSAxMS41NDk4IDcuMzU0ODQgMTEuNDEwMiA3LjI3OTUxIDExLjE2MzRDNy4yMDUgMTAuOTE2MSA3LjM0NDYxIDEwLjY1NTMgNy41OTE0OCAxMC41Nzk5QzkuNzcwNCA5LjkxODczIDEyLjQ3OTUgMTAuMjM4OSAxNC4zMzEzIDExLjM3NzFDMTQuNTUxNiAxMS41MTI2IDE0LjYyMTIgMTEuODAwNCAxNC40ODU3IDEyLjAyMDNaTTE0LjU0ODcgMTAuMzE4N0MxMi42MTQ2IDkuMTcwMzIgOS40MjQ0NCA5LjA2NDY5IDcuNTc3OTcgOS42MjQ3N0M3LjI4MTU2IDkuNzE0ODQgNi45Njc5NCA5LjU0NzM5IDYuODc4MjggOS4yNTA5N0M2Ljc4ODYyIDguOTU0NTUgNi45NTU2NiA4LjY0MDk0IDcuMjUyNDkgOC41NTA4N0M5LjM3MjA0IDcuOTA3NjggMTIuODk1MSA4LjAzMTczIDE1LjEyMTUgOS4zNTMzM0MxNS4zODggOS41MTE3NyAxNS40NzU2IDkuODU2MDkgMTUuMzE3NiAxMC4xMjIyQzE1LjE2IDEwLjM4OTIgMTQuODE0OCAxMC40NzcyIDE0LjU0ODcgMTAuMzE4N1oiIGZpbGw9IiMwNDAwMDEiLz4KPC9zdmc+Cg==");
  }
}

@container style(--variant: sky) {
  .poster::after {
    content: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTUwIiBoZWlnaHQ9IjE1MCIgdmlld0JveD0iMCAwIDE1MCAxNTAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0wIDM4LjVWMEg5M0M4OSAzLjUgODQgMTkgNjQuNSAxOUM0Ny41IDE5IDQyLjU0NTUgOS41IDI0IDE1LjVDMTEgMTkuNzA1OSAxNy41IDMwLjUgMCAzOC41WiIgZmlsbD0iI0E4RDBFMiIgZmlsbC1vcGFjaXR5PSIwLjkzIi8+CjxwYXRoIGQ9Ik0xLjQzMDUxZS0wNSA4NlYxNTBIMTUwVjk4LjVDMTQ2LjUgMTAwIDE0My41IDEwOCAxMzEgMTA4QzExOS41IDEwOCAxMTMuNSAxMDAuNSAxMDEuNSA5OUM5MiA5Ny44MTI1IDg1LjUgMTA1LjUgNzMgMTAwQzYyLjIyOCA5NS4yNjAzIDQ5LjUgODIgMzIgODJDMTkgODIgMTAuNSA4NiAxLjQzMDUxZS0wNSA4NloiIGZpbGw9IiNBOEQwRTIiIGZpbGwtb3BhY2l0eT0iMC45MyIvPgo8cGF0aCBkPSJNMTAuOTk5OSA1QzcuNjg2MDYgNSA0Ljk5OTg4IDcuNjg2MTggNC45OTk4OCAxMUM0Ljk5OTg4IDE0LjMxMzggNy42ODYwNiAxNyAxMC45OTk5IDE3QzE0LjMxMzcgMTcgMTYuOTk5OSAxNC4zMTM4IDE2Ljk5OTkgMTFDMTYuOTk5OSA3LjY4NjU5IDE0LjMxMzcgNS4wMDA0MSAxMC45OTk5IDVaTTEzLjc1MTYgMTMuNjUzNEMxMy42NDM5IDEzLjgzMDMgMTMuNDEzNCAxMy44ODU2IDEzLjIzNzMgMTMuNzc3OUMxMS44Mjg1IDEyLjkxNjkgMTAuMDU0OSAxMi43MjI0IDcuOTY2NTEgMTMuMTk5NEM3Ljc2NTA4IDEzLjI0NTYgNy41NjQ0NiAxMy4xMTk1IDcuNTE4NjEgMTIuOTE4MUM3LjQ3MjM0IDEyLjcxNjcgNy41OTgwNCAxMi41MTYxIDcuNzk5ODggMTIuNDcwMkMxMC4wODUyIDExLjk0ODIgMTIuMDQ1OSAxMi4xNzMgMTMuNjI3NSAxMy4xMzkyQzEzLjgwMzYgMTMuMjQ3NyAxMy44NTk3IDEzLjQ3NzQgMTMuNzUxNiAxMy42NTM0Wk0xNC40ODU3IDEyLjAyMDNDMTQuMzUwMSAxMi4yNDA1IDE0LjA2MTkgMTIuMzA5MyAxMy44NDIgMTIuMTc0MkMxMi4yMjk4IDExLjE4MyA5Ljc3MDgxIDEwLjg5NiA3Ljg2MzM0IDExLjQ3NDlDNy42MTYwNSAxMS41NDk4IDcuMzU0ODQgMTEuNDEwMiA3LjI3OTUxIDExLjE2MzRDNy4yMDUgMTAuOTE2MSA3LjM0NDYxIDEwLjY1NTMgNy41OTE0OCAxMC41Nzk5QzkuNzcwNCA5LjkxODczIDEyLjQ3OTUgMTAuMjM4OSAxNC4zMzEzIDExLjM3NzFDMTQuNTUxNiAxMS41MTI2IDE0LjYyMTIgMTEuODAwNCAxNC40ODU3IDEyLjAyMDNaTTE0LjU0ODcgMTAuMzE4N0MxMi42MTQ2IDkuMTcwMzIgOS40MjQ0NCA5LjA2NDY5IDcuNTc3OTcgOS42MjQ3N0M3LjI4MTU2IDkuNzE0ODQgNi45Njc5NCA5LjU0NzM5IDYuODc4MjggOS4yNTA5N0M2Ljc4ODYyIDguOTU0NTUgNi45NTU2NiA4LjY0MDk0IDcuMjUyNDkgOC41NTA4N0M5LjM3MjA0IDcuOTA3NjggMTIuODk1MSA4LjAzMTczIDE1LjEyMTUgOS4zNTMzM0MxNS4zODggOS41MTE3NyAxNS40NzU2IDkuODU2MDkgMTUuMzE3NiAxMC4xMjIyQzE1LjE2IDEwLjM4OTIgMTQuODE0OCAxMC40NzcyIDE0LjU0ODcgMTAuMzE4N1oiIGZpbGw9IiMwNDAwMDEiLz4KPC9zdmc+Cg==");
  }
}