@layer base, demo;
  @import url(https://fonts.bunny.net/css?family=abel:400);

  @layer demo {
    .carousel {
      --items: 6;
      --carousel-duration: 20s;
      @media (width > 600px) {
        --carousel-duration: 20s;
      }
      --carousel-width: min(80vw, 1200px);
      --carousel-item-width: 280px;
      --carousel-item-height: 450px;
      --carousel-item-gap: 2rem;

      --clr-cta: rgb(0, 132, 209);

      position: relative;
      width: var(--carousel-width);
      height: var(--carousel-item-height);
      overflow: clip;

      &[mask] {
        mask-image: linear-gradient(to right, transparent, black 10% 90%, transparent);
      }

      &[reverse] > article {
        animation-direction: reverse;
      }

      &:hover > article {
        animation-play-state: paused;
      }
    }

    .carousel > article {
      
      position: absolute;
      top: 0;
      left: calc(100% + var(--carousel-item-gap));
      width: var(--carousel-item-width);
      height: var(--carousel-item-height);
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
      background: light-dark(white, rgba(255 255 255 / 0.05));
      color: light-dark(rgb(49, 65, 88), white);
      border: 1px solid light-dark(rgba(0 0 0 / 0.25), rgba(255 255 255 / 0.15));
      border-radius: 10px;
      overflow: hidden;
      font-family: "Abel", sans-serif;

      will-change: transform;
      animation-name: marquee;
      animation-duration: var(--carousel-duration);
      animation-timing-function: linear;
      animation-iteration-count: infinite;
      animation-delay: calc(
        var(--carousel-duration) / var(--items) * 1 * var(--i) * -1
      );

      &:nth-child(1) { --i: 0; }
      &:nth-child(2) { --i: 1; }
      &:nth-child(3) { --i: 2; }
      &:nth-child(4) { --i: 3; }
      &:nth-child(5) { --i: 4; }
      &:nth-child(6) { --i: 5; }
      &:nth-child(7) { --i: 6; }
      &:nth-child(8) { --i: 7; }

      
    }

    .carousel img {
      width: 100%;
      height: 200px;
      object-fit: cover;
    }

    .carousel > article h2 {
      justify-content: center;
      font-size: 1.2rem;
      font-weight: 400;
      padding-left: 5px !important;
      margin: 0;
    }

    .carousel-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 0.25rem;
      padding-left: 5px !important;
  padding-right: 1rem;
    }

    .carousel-tags .tag {
      background: #eee;
      border-radius: 3px;
      padding:0.2rem 0.4rem !important; 
      font-size: 0.75rem;
      text-transform: uppercase;
    }

    .carousel-tags .event { background: #ffeb3b; }
    .carousel-tags .update { background: #2196f3; color: white; }
    .carousel-tags .game { background: #4caf50; color: white; }
    .carousel-tags .Amogus { background: #e91e63; color: white; }

    .carousel-content {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 5px !important;
      gap: 1rem;
    }

    .carousel-content p {
      margin: 0;
      font-size: 0.9rem;
      line-height: 1.4;
      padding-left: 1rem;
  padding-right: 1rem;
  justify-content: center;
    }

    .carousel-content a {
      align-self: start;
      padding: 0.3rem 0.6rem !important;
      border: 1px solid var(--clr-cta);
      color: var(--clr-cta);
      border-radius: 3px;
      text-decoration: none;
      text-transform: lowercase;
      transition: background 0.2s ease-in-out;
    }

    .carousel-content a:hover {
      background: var(--clr-cta);
      color: white;
    }

    @keyframes marquee {
      100% {
        transform: translateX(
          calc(
            (var(--items) * (var(--carousel-item-width) + var(--carousel-item-gap))) * -1
          )
        );
      }
    }
  }

  @layer base {
    * {
      box-sizing: border-box;
    }

    :root {
      color-scheme: light dark;
      --bg-dark: rgb(2, 6, 24);
      --bg-light: rgb(229, 229, 229);
      --txt-light: rgb(10, 10, 10);
      --txt-dark: rgb(245, 245, 245);
    }

    #latest_news {
      background-color: black;
      color: light-dark(var(--txt-light), var(--txt-dark));
      margin: 0;
      padding: 2rem;
      font-size: 1rem;
      font-family: "Abel", sans-serif;
      line-height: 1.5;
      display: grid;
      place-items: center;
      gap: 2rem;
    }
  }