.text-read-more{
  padding-top: 50px;
  padding-bottom: 32px;
  padding-left: var(--px160-percent);
  padding-right: var(--px160-percent);


  .trm__titre{
    margin-bottom: 32px;
  }
  .trm__text{
    &::before{
      content: '';
      display: block;
      position: relative;
      width: 38px;
      height: 38px;
      margin-bottom: 10px;
      background-image: url('../../images/icons/diag_arrow.svg');
      background-repeat: no-repeat;
      background-size: contain;
    }

    a {
      text-decoration-line: underline;
      text-decoration-color: var(--color-secondary--1);
      font-weight: 700;
    }
  }
  .trm__text-hidden{
    display: grid;
    grid-template-rows: 0fr;
    transition: all 0.2s;
    .trm__text-hidden__content{
      overflow: hidden;
    }
  }

  .trm__toggle{
    width:100%;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 32px;

    .more{
      font-weight: 700;
    }
    .less{
      font-weight: 700;
      display:none;
    }
    .arrow{
      width: 30px;
      height: 50px;
      background-image: url("../../images/icons/summary_icon.svg");
      transform: rotateZ(90deg);
      background-repeat: no-repeat;
      background-size: 30px 50px;
      transition: all 0.2s;
    }
  }

  &[data-state="open"]{
    .trm__text-hidden{
      grid-template-rows: 1fr;
    }
    .trm__toggle{
      .more{
        display:none;
      }
      .less{
        display:block;
      }
      .arrow{
        transform: rotateZ(270deg);
      }
    }

  }
}

@media all and (min-width: 750px){
  .text-read-more{
    padding: 107px var(--px160-percent) 75px var(--px160-percent);
    .trm__titre{
      padding: 0 calc(1 * var(--px160-percent));
      margin-bottom: 64px;
    }
    .trm__text,
    .trm__text-hidden{
      padding: 0 calc(1 * var(--px160-percent));
    }
    &.text-narrow{
      .trm__text,
      .trm__text-hidden{
        padding: 0 calc(2 * var(--px160-percent));
      }
    }
  }
}