/* ┬  ┌─┐┬ ┬┌─┐┬ ┬┌┬┐ */
/* │  ├─┤└┬┘│ ││ │ │  */
/* ┴─┘┴ ┴ ┴ └─┘└─┘ ┴  */
#features {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: var(--secondary-background-color);
  padding: 3em 0px;
}


/* ┬ ┬┌┐┌┌─┐┌─┐┬  ┌┬┐┬┌┐┌┌─┐  ┌┬┐┌─┐┌┬┐┌─┐┬┬  ┌─┐ */
/* │ ││││├┤ │ ││   │││││││ ┬   ││├┤  │ ├─┤││  └─┐ */
/* └─┘┘└┘└  └─┘┴─┘─┴┘┴┘└┘└─┘  ─┴┘└─┘ ┴ ┴ ┴┴┴─┘└─┘ */
#features > div {
  --nb-columns: 4;
  --block-width: calc(100% / var(--nb-columns) - var(--gap) * calc(var(--nb-columns) - 1) / var(--nb-columns));
  --block-ratio: calc(280 / 130);

  position: relative;
  width: 80%;
  max-width: 1000px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: var(--gap);
}

#features details {
  flex: 0 0 var(--block-width);
  aspect-ratio: var(--block-ratio);
  box-sizing: border-box;
  border: 1px solid var(--default-text-color);
  height: 100%;
}

/* cycle colors */
#features details:nth-child(3n) {
  background-color: var(--tertiary-background-color);
}

#features details:nth-child(3n+1) {
  background-color: var(--default-background-color);
}

/* cycle colors soon */
#features details.new summary::before {
  content: "NEW!";
  position: absolute;
  margin-top: -3.5em;
  font-weight: bold;
  transform: rotate(-10deg);
}
#features details.new.fr summary::before {
  content: "NOUVEAU !";
}

#features details.soon summary::before {
  content: "SOON!";
}
#features details.soon.fr summary::before {
  content: "BIENTÔT !";
}

#features details.new {
  background-color: navajowhite;
}
#features details.new:nth-child(3n) {
  background-color: paleturquoise;
}

#features details.new:nth-child(3n+1) {
  background-color: thistle;
}

/* summary */
#features details summary {
  display: flex;
  justify-content: center;
  align-items: center;
  text-transform: uppercase;
  height: 100%;
}

/* align icons */
#features img {
  vertical-align: top;
  width: auto;
  height: 1em;
  margin: .2em;
}

#features details > div {
  border: 1px solid var(--default-text-color);
  transform: translateY(calc(-100% + 1px));
  display: flex;
  align-items: center;
  /* trick, this is the max height on desktop */
  max-height: 110px;
  z-index: 1;
}

/* reposition close button */
#features .close-details {
  top: 5px;
  left: 5px;
}

#features details > div h3 {
  flex: 0 0 var(--block-width);
  aspect-ratio: var(--block-ratio);
  text-transform: uppercase;
  font-size: var(--default-font-size);
}

#features details > div h3 img {
  vertical-align: bottom;
  width: auto;
  height: var(--default-font-size);
}

#features details > div > p {
  margin: 0 var(--gap);
}

#features details > div > h3 {
  display: flex;
  justify-content: center;
  align-items: center;
}
#features details > div > h3 * {
  font-size: var(--default-font-size);
}

/* position details for opening/closing animation depending 
on how many there are on a line */
#features details:nth-child(n)[open] > div {
  left: 0;
}

#features details:nth-child(4n+2) > div, #features details.closing:nth-child(4n+2) > div {
  left: calc(100% / var(--nb-columns) * 0.5);
}

#features details:nth-child(4n+3) > div, #features details.closing:nth-child(4n+3) > div {
  left: calc(100% / var(--nb-columns) * 1.5);
}

#features details:nth-child(4n+4) > div, #features details.closing:nth-child(4n+4) > div {
  left: calc(100% / var(--nb-columns) * 2.5);
}

#features details:nth-child(4n+5) > div, #features details.closing:nth-child(4n+5) > div {
  left: calc(100% / var(--nb-columns) * 3.5);
}


/*---------MOBILE---------*/
@media (max-width:800px) {
  #features > div {
    --gap: 20px;
    --block-ratio: 1;
    --nb-columns: 2;
  }

  #features details summary {
    flex-direction: column;
  }

  #features details > div {
    flex-direction: column;
    padding: 1em;
    height: 200px;
    min-height: fit-content;
  }
  #features details > div h3 {
    aspect-ratio: unset;
    margin-bottom: 1em;
  }
  #features details[open] > div {
    max-height: 200px;
  }
  #features details.closing > div {
    max-height: 110px;
  }

  /* override */
  #features details:nth-child(4n+4) > div, #features details.closing:nth-child(4n+4) > div {
    left: calc(100% / var(--nb-columns) * 0.5);
  }
  
  #features details:nth-child(4n+5) > div, #features details.closing:nth-child(4n+5) > div {
    left: calc(100% / var(--nb-columns) * 1.5);
  }
}