/* *********************** */
/* *********************** */
/* ****** projects ******* */
/* *********************** */
/* *********************** */

#projects ul {
  list-style: none;
  padding: 0;
}

#projects .projectsList {
  width: 100%;
  height: fit-content;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5em;
}

#projects .projectsList .project {
  width: 20em;
  height: 33em;
  padding: 1em;
  border-radius: 0.5em;
  background-color: var(--color-tertiary);
  box-shadow: 0 0 0.5em var(--color-secondary-light);

  display: grid;
  grid-template-rows: 1.5em 10em auto 4em 2em;
  grid-template-areas:
    "title"
    "img"
    "description"
    "tools"
    "links";
  align-items: center;
  gap: 0.5em;
}

#projects .projectsList .project h3 {
  grid-area: title;
  height: 100%;
  font-size: 1.2em;
  text-align: center;
}

#projects .projectsList .project .imgContainer {
  grid-area: img;
  width: 100%;
  height: 100%;
  border-radius: 0.5em;
  overflow: hidden;
  box-shadow: 0 0 0.2em var(--color-secondary);
}

#projects .projectsList .project .imgContainer img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

#projects .projectsList .project .info {
  grid-area: description;
  height: 100%;
  font-size: 0.9em;
}

#projects .projectsList .project ul {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.2em;
  height: 100%;
}

#projects .projectsList .project .tools {
  grid-area: tools;
}

#projects .projectsList .project .links {
  grid-area: links;
}

#projects .projectsList .project ul li {
  width: fit-content;
  height: 1.5em;
  padding: 0.3em 1em;
  border-radius: 0.5em;
  background-color: var(--color-primary);
  color: var(--color-tertiary);
}

#projects .projectsList .project .links li {
  padding: 0;
  border-radius: 5em;
  width: fit-content;
  height: fit-content;

  background-color: var(--color-tertiary);
  box-shadow:
    0 0 0.5em var(--color-primary),
    inset 0 0 0 0.15em var(--color-primary);
  transition: 0.5s;
}

#projects .projectsList .project .links li a {
  display: block;
  padding: 0.5em 2em;

  color: var(--color-primary);
  text-decoration: none;
  border-radius: 5em;
}

#projects .projectsList .project ul li:has(a:hover) {
  background-color: var(--color-primary);
  box-shadow: none;
}

#projects .projectsList .project ul li a:hover {
  color: var(--color-tertiary);
}

#projects .projectsList .project ul li:has(a:active) {
  transform: scale(0.9);
}

#projects .projectsList .project.slider {
  order: -1;
  grid-template-rows: 1.5em 26em auto;

  grid-template-areas:
    "title"
    "img"
    "description";
}

#projects .projectsList .project.slider ul {
  grid-area: img;
  width: 18em;

  display: flex;
  flex-wrap: nowrap;
  gap: 0.5em;
  overflow: hidden;
}

@keyframes sliding {
  0%,
  14.28% {
    transform: translateX(0);
  } /* Slide 1 - 2s */
  16.66%,
  30.94% {
    transform: translateX(-100%);
  } /* Slide 2 - 2s */
  33.33%,
  47.61% {
    transform: translateX(-200%);
  } /* Slide 3 - 2s */
  50%,
  64.28% {
    transform: translateX(-300%);
  } /* Slide 4 - 2s */
  66.66%,
  80.94% {
    transform: translateX(-400%);
  } /* Slide 5 - 2s */
  83.33%,
  97.61% {
    transform: translateX(-500%);
  } /* Slide 6 - 2s */
  100% {
    transform: translateX(0);
  } /* Terug naar start */
}

#projects .projectsList .project.slider ul li {
  flex-shrink: 0;
  width: 90%;
  height: 100%;
  padding: 0.3em 0;
  background-color: var(--color-tertiary);

  animation: sliding 24s -3.5s infinite linear;
}

#projects .projectsList .project.slider ul:hover li {
  animation-play-state: paused;
}

#projects .projectsList .project.slider ul li h4 {
  color: var(--color-primary);
  height: 6%;
  text-align: center;
}

#projects .projectsList .project.slider ul li div {
  width: 100%;
  height: 48%;
  overflow: hidden;
}

#projects .projectsList .project.slider ul li:nth-of-type(5) div:first-of-type,
#projects .projectsList .project.slider ul li:nth-of-type(6) div:first-of-type {
  height: 65%;
}

#projects .projectsList .project.slider ul li:nth-of-type(5) div:first-of-type img,
#projects .projectsList .project.slider ul li:nth-of-type(6) div:first-of-type img {
  object-position: center;
}

#projects .projectsList .project.slider ul li:nth-of-type(5) div:last-of-type,
#projects .projectsList .project.slider ul li:nth-of-type(6) div:last-of-type {
  height: 30%;
}

#projects .projectsList .project.slider ul li div p {
  padding: 1em 0;
  text-align: center;
  color: var(--color-secondary);
  font-weight: bold;
}

#projects .projectsList .project.slider ul li div img {
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: center -2.1em;
}

#projects .designsList {
  height: 30em;
  padding: 0.5em 0;
  display: flex;
  gap: 1em;
  overflow: auto;
  overscroll-behavior-x: contain;
}

#projects .designsList::-webkit-scrollbar {
  height: 0.5em;
}

#projects .designsList::-webkit-scrollbar-track {
  background: transparent;
  box-shadow: none;
}

#projects .designsList li {
  height: 100%;
}

#projects .designsList img {
  width: auto;
  height: 100%;
  object-fit: cover;
}