.biography {
  padding-top: 70px;
  border-top: 1px solid #191919;
  @media (max-width: 1024px) {
    padding-top: 50px;
  }
  @media (max-width: 768px) {
    padding-top: 40px;
  }
  .section-container {
    position: relative;
    .fade {
      position: absolute;
      z-index: 1;
      height: 100%;
      width: 500px;
      right: 0;
      background: transparent;
      background: linear-gradient(90deg, transparent, #fffbf7);
      @media (max-width: 1024px) {
        display: none;
      }
    }
    .arrows {
      position: absolute;
      z-index: 2;
      width: 50px;
      right: 0;
      margin-top: 84px;
      @media (max-width: 1024px) {
        display: none;
      }
      div {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        border: 1px solid #191919;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        background-color: #fffbf7;
        transition: all 0.2s ease;

        &.disabled {
          opacity: 0.5;
        }

        &.right {
          margin-bottom: 40px;
        }
      }
    }
    h2 {
      text-align: center;
      margin-top: 0;
      @media (max-width: 1024px) {
        margin-top: var(--g-md);
        text-align: center;
      }
    }
    .slider {
      overflow: hidden;
      padding-block: 12px;
      padding-right: 200px;
      @media (max-width: 1024px) {
        overflow-x: scroll;
        overflow-y: clip;
      }

      h3 {
        margin-block: 0 5px;
        font-weight: 700;
      }

      .top {
        position: relative;
        display: flex;
        width: fit-content;
        gap: 12px;
        padding-left: 27px;

        &:before {
          content: '';
          position: absolute;
          width: 100%;
          height: 1px;
          background-color: #191919;
          top: 152px;
        }

        .card-wrapper {
          width: 142px;
          &:nth-child(1) {
            margin-left: 50px;
          }
          .card {
            .text {
              font-size: var(--fs-md);
            }
          }

          &:nth-of-type(odd) {
            .card {
              width: 284px;
              height: 152px;
              min-width: 284px;
              position: relative;

              .indicator {
                width: 1px;
                height: 132px;
                border-left: 1px dashed #191919;
                position: absolute;
                bottom: 2px;
                left: -18px;
                &:before {
                  content: url('data:image/svg+xml,<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="6" cy="6" r="5.5" fill="%23FFFBF7" stroke="%23191919"/></svg>');
                  position: absolute;
                  left: -6px;
                  top: -12px;
                }
                &:after {
                  content: url('data:image/svg+xml,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="10" cy="10" r="9.5" fill="%23FFFBF7" stroke="%23191919"/></svg>');
                  position: absolute;
                  left: -10px;
                  bottom: -20px;
                }
              }
            }
          }

          &:nth-of-type(even) {
            margin-top: 152px;
            .card {
              width: 284px;
              min-width: 284px;
              height: 260px;
              padding-top: 110px;
              position: relative;

              .indicator {
                width: 1px;
                height: 120px;
                border-left: 1px dashed #191919;
                position: absolute;
                top: 2px;
                left: -20px;
                &:before {
                  content: url('data:image/svg+xml,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="10" cy="10" r="9.5" fill="%23FFFBF7" stroke="%23191919"/></svg>');
                  position: absolute;
                  left: -10px;
                  top: -12px;
                }
                &:after {
                  content: url('data:image/svg+xml,<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="6" cy="6" r="5.5" fill="%23FFFBF7" stroke="%23191919"/></svg>');
                  position: absolute;
                  left: -6px;
                  bottom: -20px;
                }
              }
            }
          }
        }
      }
    }
  }
}