.body-part {
      --color: rgba(30, 30, 30);
      --bgColor: rgba(245, 245, 245);
      min-height: 100vh;
      display: grid;
      align-content: center;
      gap: 2rem;
      padding: 2rem;
      font-family: "Poppins", sans-serif;
      color: var(--color);
      background: var(--bgColor);
  }

  .h1-part {
      text-align: center;
  }

  .ul-part {
      --col-gap: 2rem;
      --row-gap: 2rem;
      --line-w: 0.25rem;
      display: grid;
      grid-template-columns: var(--line-w) 1fr;
      grid-auto-columns: max-content;
      column-gap: var(--col-gap);
      list-style: none;
      width: min(60rem, 90%);
      margin-inline: auto;
  }

  .ul-part::before {
      content: "";
      grid-column: 1;
      grid-row: 1 / span 20;
      background: rgb(225, 225, 225);
      border-radius: calc(var(--line-w) / 2);
  }

  .li-part:not(:last-child) {
      margin-bottom: var(--row-gap);
  }

  .li-part {
      grid-column: 2;
      --inlineP: 1.5rem;
      margin-inline: var(--inlineP);
      grid-row: span 2;
      display: grid;
      grid-template-rows: min-content min-content min-content;
  }

  .date-part {
      --dateH: 3rem;
      height: var(--dateH);
      margin-inline: calc(var(--inlineP) * -1);
      text-align: center;
      background-color: var(--accent-color);
      color: white;
      font-size: 1.25rem;
      font-weight: 700;
      display: grid;
      place-content: center;
      position: relative;
      border-radius: calc(var(--dateH) / 2) 0 0 calc(var(--dateH) / 2);
  }

  .date-part::before {
      content: "";
      width: var(--inlineP);
      aspect-ratio: 1;
      background: var(--accent-color);
      background-image: linear-gradient(rgba(0, 0, 0, 0.2) 100%, transparent);
      position: absolute;
      top: 100%;
      clip-path: polygon(0 0, 100% 0, 0 100%);
      right: 0;
  }

  .date-part::after {
      content: "";
      position: absolute;
      width: 2rem;
      aspect-ratio: 1;
      background: var(--bgColor);
      border: 0.3rem solid var(--accent-color);
      border-radius: 50%;
      top: 50%;
      transform: translate(50%, -50%);
      right: calc(100% + var(--col-gap) + var(--line-w) / 2);
  }

  .title-part,
  .descr-part {
      background: var(--bgColor);
      position: relative;
      padding-inline: 1.5rem;
  }

  .title-part {
      overflow: hidden;
      padding-block-start: 1.5rem;
      padding-block-end: 1rem;
      font-weight: 500;
  }

  .descr-part {
      padding-block-end: 1.5rem;
      font-weight: 300;
  }

  .title-part::before,
  .descr-part::before {
      content: "";
      position: absolute;
      width: 90%;
      height: 0.5rem;
      background: rgba(0, 0, 0, 0.5);
      left: 50%;
      border-radius: 50%;
      filter: blur(4px);
      transform: translate(-50%, 50%);
  }

  .title-part::before {
      bottom: calc(100% + 0.125rem);
  }

  .descr-part::before {
      z-index: -1;
      bottom: 0.25rem;
  }

  @media (min-width: 40rem) {
      .ul-part {
          grid-template-columns: 1fr var(--line-w) 1fr;
      }

      .ul-part::before {
          grid-column: 2;
      }

      .li-part:nth-child(odd) {
          grid-column: 1;
      }

      .li-part:nth-child(even) {
          grid-column: 3;
      }

      .li-part:nth-child(2) {
          grid-row: 2/4;
      }

      .li-part:nth-child(odd) .date-part::before {
          clip-path: polygon(0 0, 100% 0, 100% 100%);
          left: 0;
      }

      .li-part:nth-child(odd) .date-part::after {
          transform: translate(-50%, -50%);
          left: calc(100% + var(--col-gap) + var(--line-w) / 2);
      }

      .li-part:nth-child(odd) .date-part {
          border-radius: 0 calc(var(--dateH) / 2) calc(var(--dateH) / 2) 0;
      }
  }

  .credits-part {
      margin-top: 1rem;
      text-align: right;
  }

  .credits-part a {
      color: var(--color);
  }

  .tittle-part2 {
      background-color: #b71c1c;
      color: white;
      border-radius: 0px 40px;
  }