.wrapperDiag{
  max-width: 50rem;
  margin-left: auto;
  margin-right: auto;
  padding-inline: 1rem;
}

.section-title{
  
  /* == animations == */
  opacity: 0;
  animation: introduction 1s ease-in 4s;
  animation-fill-mode: forwards;
}

.diagonal 
{
  --skew-angle: 5deg; 
  --background: linear-gradient(45deg, #FF7F27, #D45C00); 

  position: relative; 
  isolation: isolate; 
}

.diagonal::after{ /* you can also use ::before*/
  content: '';
  background-color: steelblue;
  position: absolute; 
  inset: 0;
  transform: skewY(var(--skew-angle));
  z-index: -1;
  background-image: var(--background);

  /* == animations == */
  opacity: 0;
  animation: introduction 1s ease-in 4s;
  animation-fill-mode: forwards;
}

.section-text{
  
  /* == animations == */
  opacity: 0;
  animation: introduction 1s ease-in 5s;
  animation-fill-mode: forwards;
}


/* diag 2 */

.wrapperDiag2{
  max-width: 50rem;
  margin-left: auto;
  margin-right: auto;
  padding-inline: 1rem;
}

.diagonal2 
{
  --skew-angle: 175deg; 
  --background: linear-gradient(45deg, #FF7F27, #D45C00); 

  position: relative; 
  isolation: isolate; 
}

.diagonal2::after{ /* you can also use ::before*/
  content: '';
  background-color: steelblue;
  position: absolute; 
  inset: 0;
  transform: skewY(var(--skew-angle));
  z-index: -1;
  background-image: var(--background);

  /* == animations == */
  opacity: 0;
  animation: introduction 1s ease-in 4s;
  animation-fill-mode: forwards;
}

.ul-list{

  /* == animations == */
  opacity: 0;
  animation: introduction 1s ease-in 6s;
  animation-fill-mode: forwards;
}