/* cie642.fr home page: the big logo, the dates, the news, and the
   illustrations around them. */

@layer components {
  /* Home */
  .home-logo {
    display: flex;
    justify-content: center;
    margin: 170px 0 0;
  }

  .future-dates {
    margin-block: 50px 35px;
  }

  .future-dates__title {
    margin: 0;
    font-size: inherit;
    text-decoration: underline;
  }

  .future-dates__list {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .news-list {
    display: flex;
    flex-direction: column;
    gap: 3rem;
    margin-block-end: 218px;
  }

  .news__title {
    margin: 0;
    font-size: 44px;
    font-weight: 900;
    line-height: 56px;
  }

  .news__date {
    margin: 0;
    font-size: 12px;
  }

  .news__content {
    padding-block-start: 10px;

    img {
      margin: 1rem auto;
      border-radius: 25px;
    }
  }

  @media (width <= 768px) {
    .home-logo {
      margin-block-start: 16px;

      img {
        inline-size: 140px;
        block-size: auto;
      }
    }

    .news-list {
      margin-block-end: 32px;
    }
  }

  /* Illustrations around the home page */
  .decor__item {
    position: absolute;
    z-index: -1;
    max-inline-size: none;
  }

  .decor--stars-left {
    inset: -50px auto auto -20vw;
    transform: matrix(0.96, -0.28, 0.28, 0.96, 0, 0);
  }

  .decor--stars-right {
    inset: -230px -10vw auto auto;
    transform: matrix(0.96, -0.28, 0.28, 0.96, 0, 0);
  }

  .decor--whale {
    inset: 682px auto auto -10vw;
  }

  .decor--stars-right-2 {
    inset: 684px -18vw auto auto;
    transform: matrix(-0.87, -0.48, 0.48, -0.87, 0, 0);
  }

  .decor--skate {
    inset: 256px -10vw auto auto;
  }

  .decor--ghost {
    inset: 1250px auto auto -10vw;
  }

  .decor--servante {
    inset: 1676px -10vw auto auto;
  }

  .decor--diner {
    inset: 1763px auto auto -25vw;
  }

  .decor--stars-left-2 {
    inset: 1300px auto auto -35vw;
    transform: matrix(0.66, 0.75, -0.75, 0.66, 0, 0);
  }

  .decor--stars-right-3 {
    inset: 1217px -25vw auto auto;
    transform: matrix(0.66, 0.75, -0.75, 0.66, 0, 0);
  }

  /* On small screens the texts are much taller: the illustrations placed
     beside them would cover them, so only the top ones stay. */
  @media (width <= 768px) {
    .decor__item {
      display: none;
    }

    .decor--skate,
    .decor--whale {
      display: block;
      scale: 0.4;
    }

    .decor--skate {
      inset: 120px -90px auto auto;
    }

    .decor--whale {
      inset: 330px auto auto -130px;
    }
  }
}