.dsfr-doc-hp-discover {
  position: relative;
  padding-bottom: 1.25rem;

  &__title {
    margin-bottom: 3rem;
  }

  .dsfr-doc-discover-tile {
    display: block;
    height: 100%;
    padding: 1.5rem 0.75rem;
    transition: box-shadow .2s ease-out;
    position: relative;

    &:hover {
      background-color: transparent;
      box-shadow: 0 0 0 1px var(--border-default-grey);
    }

    &__container {
      display: flex;
      flex-direction: column;
      height: 100%;
    }

    &__img {
      display: flex;

      &--dark {
        display: none;
      }

      img,
      svg {
        width: 70px;
        height: 70px;
      }

      svg {
        rect,
        circle,
        path {
          transition: ease-out 0.2s;
        }
      }
    }

    &__content {
      height: 100%;
      padding-top: 0.75rem;

      p {
        margin-bottom: 1rem;
      }
    }

    .fr-link {
      &::before {
        content: '';
        display: block;
        height: 100%;
        bottom: 0;
        left: 0;
        outline-color: inherit;
        outline-offset: 2px;
        outline-style: inherit;
        outline-width: 2px;
        position: absolute;
        right: 0;
        top: 0;
        width: 100%;
        z-index: 1;
        mask-image: none;
        background: none;
      }
    }

    @media (min-width: 48em) {
      padding: 1.5rem 1.25rem;
    }
  }

  @media (min-width: 62em) {
    padding-bottom: 5.75rem;
  }
}

.dsfr-doc-hp-discover {
  .fr-col-12:nth-child(1) .dsfr-doc-discover-tile:hover {
    .dsfr-doc-discover-tile__img {
      svg {
        rect {
          x: 34;
          width: 36;
        }

        circle:nth-of-type(1) {
          cx: 51;
          cy: 57;
        }

        circle:nth-of-type(2) {
          cx: 21;
          cy: 9;
        }

        circle:nth-of-type(3) {
          cx: 43.5;
          cy: 33;
          r: 16.5;
        }
      }
    }
  }

  .fr-col-12:nth-child(2) .dsfr-doc-discover-tile:hover {
    .dsfr-doc-discover-tile__img {
      svg {
        rect {
          y: 28;
          height: 42;
        }

        circle:nth-of-type(1) {
          cx: 22.5;
          cy: 22.5;
          r: 22.5;
        }

        circle:nth-of-type(2) {
          cx: 57;
          cy: 17;
        }

        circle:nth-of-type(3) {
          cx: 21;
          cy: 62;
        }

      }
    }
  }

  .fr-col-12:nth-child(3) .dsfr-doc-discover-tile:hover {
    .dsfr-doc-discover-tile__img {
      svg {
        rect:nth-of-type(2) {
          y: 52;
          height: 18;
        }

        rect:nth-of-type(3) {
          x: 25;
          width: 45;
        }

        rect:nth-of-type(4) {
          x: 24;
          y: 12;
          width: 26;
          height: 34;
        }

        circle:nth-of-type(2) {
          cx: 14;
        }

        circle:nth-of-type(3) {
          cy: 42;
        }
      }
    }
  }

  .fr-col-12:nth-child(4) .dsfr-doc-discover-tile:hover {
    .dsfr-doc-discover-tile__img {
      svg {
        rect:nth-of-type(1) {
          height: 31;
        }

        circle:nth-of-type(1) {
          cy: 56;
        }

        circle:nth-of-type(2) {
          cy: 56;
        }

        circle:nth-of-type(3) {
          cx: 26;
          r: 17;
        }
      }
    }
  }
}

[data-fr-theme='dark'] {
  .dsfr-doc-hp-discover .dsfr-doc-discover-tile__img--dark {
    display: block;
  }

  .dsfr-doc-hp-discover .dsfr-doc-discover-tile__img--light {
    display: none;
  }
}