.bloc_metier{
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas: "a""b""c""d" "e""f""g";
  .bloc-metier__titre{
    grid-area: a;
    background-color: var(--color-primary--1);
    color: var(--color-white);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
    min-height: 200px;
    
    >*{
      width: 351px;
      flex-shrink: 0;
    }
  }
  .bloc_metier_card{
    &:nth-child(2){
      color: var(--color-secondary--1);
      background-color: var(--color-primary--4);
      grid-area: b;
    }
    &:nth-child(3){
      color: var(--color-primary--1);
      background-color: var(--color-primary--3);
      grid-area: c;
    }
    &:nth-child(4){
      color: var(--color-white);
      background-color: var(--color-primary--2);
      grid-area: d;
      &::after{
        background-image: url(../../images/icons/arrow.svg);
        background-color: var(--color-white);
      }
    }
    &:nth-child(5){
      color: var(--color-white);
      background-color: var(--color-primary--2);
      grid-area: f;
      &::after{
        background-image: url(../../images/icons/arrow.svg);
        background-color: var(--color-white);
      }
    }
    &:nth-child(6){
      color: var(--color-secondary--1);
      background-color: var(--color-primary--4);
      grid-area: e;
    }
    &:nth-child(7){
      color: var(--color-primary--1);
      background-color: var(--color-primary--3);
      grid-area: g;
    }
    &:hover{
      &::after{
        background-image: url(../../images/icons/arrow.svg);
        background-color: var(--color-white);
      }

      &:nth-child(4)::after, &:nth-child(5)::after{
        background-image: url(../../images/icons/arrow--white.svg);
        background-color: var(--color-primary--1);
      }
    }
    
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    padding-top: 40px;
    padding-bottom: 90px;
    
    &::after {
      position: absolute;
      content: '';
      background-image: url(../../images/icons/arrow--white.svg);
      background-position: center;
      background-repeat: no-repeat;
      display: flex;
      width: 54px;
      height: 54px;
      justify-content: center;
      align-items: center;
      transition: ease all 150ms;
      border-radius: 15px;
      background-color: var(--color-primary--1);
      bottom: 32px;
      right: 32px;
    }
    
  }
}


@media all and (min-width: 500px){
  .bloc_metier{
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "a a""d c""b e""g f";

    .bloc_metier_card{
      &:nth-child(2){
        grid-area: b;
      }
      &:nth-child(3){
        grid-area: c;
      }
      &:nth-child(4){
        grid-area: d;
      }
      &:nth-child(5){
        grid-area: e;
      }
      &:nth-child(6){
        grid-area: f;
      }
      &:nth-child(7){
        grid-area: g;
      }

      padding-top: 80px;
      padding-bottom: 90px;

    }
  }
}

@media all and (min-width: 1000px){
  .bloc_metier{
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-areas: "a a a""b c d" "e f g";

    .bloc_metier_card{
      padding-top: 90px;
    }
  }
}

@media all and (min-width: 1400px){
  .bloc_metier{
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-areas: "a b c d" "a e f g";
  }
}