#three-col {
  grid-template-columns: 1.35fr 2fr;

  & > div {
    grid-column: 1 / 4;
  }

  & > article[data-bg="primary"] {
    position: relative;
    overflow: hidden;

    &::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image: url('./../../img/new-design/crypto/comparateur de performances.svg');
      background-position: right top;
      background-repeat: no-repeat;
      background-size: cover;
      transition: transform 0.6s ease;
      z-index: 0;
    }

    &:hover::before {
      transform: scale(1.08);
    }

    & > div {
      position: relative;
      z-index: 1;
    }

    @media (width < 64rem) {
      &::before {
        background-image: none;
      }
    }

    [role="button"] {
      transition: background-color 0.2s ease, color 0.2s ease, padding-right 0.2s ease;

      &::after {
        display: block;
        opacity: 0;
        width: 0;
        transition: opacity 0.2s ease, width 0.2s ease;
      }

      &:is(:hover, :active) {
        &::after {
          opacity: 1;
          width: var(--font-size, 1rem);
        }
      }
    }
  }

  @media (width < 64rem) {
    grid-template-columns: 1fr;
    & > div {
      grid-column: 1 / 2;
    }
  }

  & > article[data-bg="first"] > div[data-layout="row"]:not(:has(h5)) {
    @media (width < 28rem) {
      flex-wrap: nowrap;

      & > div[data-layout="row"]:first-child {
        flex: 1;
        min-width: 0;
        overflow: hidden;

        & p[data-color="title"] {
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        &[data-gap="md"] {
          gap: var(--space-xs, 0.25rem);
        }
      }

      & > div[data-layout="row"]:last-child {
        flex-shrink: 0;
        white-space: nowrap;

        &[data-gap="md"] {
          gap: var(--space-xs, 0.25rem);
        }
      }
    }
  }
}

[data-component="crypto-array"] {
  --grid: 1fr 1.5fr 1.5fr 1.5fr 1.5fr 1.5fr 1fr;
  --gap: 1rem;
  display: grid;
  grid-template-columns: var(--grid);
  gap: var(--gap);
  padding-top: 0 !important;

  @media (width < 64rem) {
    --grid: 1fr 1fr 1fr 1fr 1fr;
    --gap: 1rem;
  }

  @media (width < 30rem) {
    /* Passe à 4 colonnes en masquant la colonne Position (déduite de l'ordre de liste) */
    --grid: 1fr 1fr 1fr 1fr;

    > article:nth-child(1) {
      display: none;
    }

    details {
      grid-column: span 4;
    }

    details summary > *:first-child {
      display: none;
    }

    details > div {
      grid-column: 1 / 5;
    }
  }

  @media (width < 24rem) {
    --grid: 1fr 1fr 1fr 1fr;
    --gap: .25rem;
  }

  /* Alignment for variation percentages with icons */
  div[data-color] p {
    font-variant-numeric: tabular-nums;
    min-width: 4rem;
    text-align: right;
  }

  @media (width < 64rem) {
    /* Empêche l'icône et le % de passer sur deux lignes dans les colonnes 24h et Y/Y */
    details summary div[data-color] {
      flex-wrap: nowrap;
    }

    /* Supprime le min-width fixe pour que le % rentre dans la cellule étroite */
    div[data-color] p {
      min-width: unset;
    }

    /* Empêche l'image et le symbole de passer sur deux lignes dans la colonne Nom */
    details summary > div[data-layout="row"] {
      flex-wrap: nowrap;
      overflow: hidden;
    }

    details summary > div[data-layout="row"] > img {
      width: 2rem;
      height: 2rem;
      flex-shrink: 0;
    }
  }

  article {
    padding-block: .25rem;
    padding-inline: .75rem;
    --font-size: .875rem;
    align-items: center;
    p {
      font-weight: bold;
    }
    @media (width < 64rem) {
      width: 100%;
      overflow: hidden;
    }

    &[data-display="lg-plus"] {
      @media (width >= 64rem) {
        display: flex;
      }
    }
  }

  details {
    grid-column: span 7;

    @media (width < 64rem) {
      grid-column: span 5;
    }
    & > summary {
      list-style: none;
      cursor: pointer;
      display: grid;
      grid-template-columns: var(--grid);
      gap: var(--gap);
      --font-size: .875rem;

      &::after {
        display: none;
      }

      &:is(:hover,:active,:focus) {
        color: var(--text-color);
      }

      & > *:nth-child(1n + 3) {
        justify-content: flex-end;
        text-align: right;
      }

      & p {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: var(--gap-xs);
        --font-size: .875rem;
        @media (width < 64rem) {
          --font-size: .75rem;
          &[data-display="lg-plus"] {
            display: none;
          }
        }
      }

      & > div {
        gap: var(--gap-md);
        @media (width < 64rem) {
          gap: var(--gap-xxs);
        }
      }
    }

    &[open] {
      [data-icon="arrow"] {
        transform: rotate(180deg);
      }
    }

    &::details-content {
      transition:
        opacity .3s,
        content-visibility .3s allow-discrete;
      padding: unset;
      background-color: transparent;
      z-index: unset;
      top: unset;
      left: unset;
      transform: unset;
      box-shadow: unset;
      position: relative;
      display: grid;
      grid-template-columns: var(--grid);
      gap: var(--gap);
    }

    & > div {
      margin-top: var(--gap);
      grid-column: 2 / 8;

      p {
        --font-size: .875rem;
      }

      @media (width < 64rem) {
        grid-column: 2 / 6;
        p {
          --font-size: .75rem;
        }
      }
    }
  }
}