/*

    ◻ HOME.css
    - This file contains the styles for the home page,
    including layout, typography, and specific UI elements.
    It builds upon the core styles defined in "core.css."

    by June Saturn

*/

/* Carousel */
.hero-carousel {
  background-color: var(--black);
  background-image: url("/assets/images/illustrations/carousel/carpentier01.png");
  background-size: cover;
  background-position: center;
  background-position-x: 60%;
  background-repeat: no-repeat;
  background-attachment: fixed;

  width: 100lvw;
  height: 100lvh;
}
.carousel-item:nth-child(2) {
  background-image: url("/assets/images/illustrations/carousel/etoile01.png");
}

/* Main */
main {
  padding-top: 24px;
  padding: 12px;
}

.prime-content {
  background-color: var(--black);
  color: var(--white);
  background-image: url("/assets/images/illustrations/carousel/etoile01.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;

  display: flex;
  width: auto;
  height: 60lvh;
  border-radius: 24px;

  padding: 24px;
  margin: 14px;
}

.prime-content > div {
  color: var(--white);

  display: inline;
  text-align: center;

  font-size: 2rem;
  font-weight: 300;
  letter-spacing: -2px;
}

.content-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  column-gap: 10px;
  row-gap: 10px;

  margin: 14px;
}

.content-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  width: auto;
  height: 40lvh;
  border-radius: 24px;

  background-color: var(--black);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
.content-item:nth-child(1) {
  background-color: rgb(226, 59, 23);
  background-image: url("/assets/images/games/the-sword-cinema/feature-graphic01.png");
}
.content-item:nth-child(2) {
  background-color: rgb(9, 204, 90);
}
.content-item:nth-child(3) {
  background-color: rgb(252, 252, 252);
}
.content-item:nth-child(4) {
  background-color: rgb(255, 255, 237);
}

.content-item > div {
  color: var(--white);

  display: inline;
  text-align: center;

  font-size: 2.6rem;
  font-weight: 300;
  letter-spacing: -3px;
  mix-blend-mode: normal;
}
.content-item:nth-child(1) > div {
  color: var(--white);
  mix-blend-mode: difference;
}
.content-item:nth-child(2) > div {
  color: var(--black);
}
.content-item:nth-child(3) > div {
  color: rgb(223, 32, 32);
}
.content-item:nth-child(4) > div {
  color: rgb(0, 178, 202);
}