.ts-front {
  margin: 0;
  background: #fff;
  font-family: 'Montserrat', sans-serif;
}

.ts-wrap {
  width: 100%;
  margin: 0;
  padding: 0;
}

.ts-list {
  display: grid;
  padding: 0;
}

.ts-strip {
  width: 100%;
  background: linear-gradient(
    to bottom,
    #fff 0,
    #fff 70px,
    var(--ts-bg, #f0f0f0) 70px,
    var(--ts-bg, #f0f0f0) calc(100% - 70px),
    #fff calc(100% - 70px),
    #fff 100%
  );
}

.ts-item {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  isolation: isolate;
}

.ts-photo {
  width: calc(35% - 48px);
  display: flex;
  justify-content: center;
  align-items: center;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: #fff;
  padding: 24px;
  box-sizing: border-box;
  position: relative;
  z-index: 2;
}

.ts-photo img {
  width: 100%;
  max-width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 50% !important;
  border: 0;
}

.ts-body {
  width: calc(65% + 148px);
  display: flex;
  align-items: center;
  text-align: left;
  z-index: 1;
  min-width: 0;
}

.ts-body-inner {
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 100px 26px;
  overflow-wrap: break-word;
  word-break: normal;
}

.ts-side-left .ts-photo { order: 1; }
.ts-side-left .ts-body { order: 2; }
.ts-side-right .ts-body { order: 1; }
.ts-side-right .ts-photo { order: 2; }
.ts-side-left .ts-body { padding-left: 100px; }
.ts-side-right .ts-body { padding-right: 100px; }
.ts-side-left .ts-photo { margin-right: -6%; }
.ts-side-right .ts-photo { margin-left: -6%; }

.ts-text,
.ts-text p,
.ts-text li {
  color: var(--ts-text-color, #101723);
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
}

.ts-title {
  color: var(--ts-headings-color, #0d1420)!important;
  margin: 0 0 8px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1.14;
}

.ts-text h1,
.ts-text h2,
.ts-text h3,
.ts-text h4,
.ts-text h5 {
  color: var(--ts-headings-color, #0d1420) !important;
  margin: 0 0 8px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1.14;
  font-size: 40px;
}

.ts-name {
  margin-top: 12px;
  font-weight: 800;
  color: var(--ts-name-color, #0d1420);
}

.ts-company {
  margin-top: 4px;
  font-weight: 600;
  color: var(--ts-text-color, #1a2534);
}

@media (max-width: 1080px) {
  .ts-photo {
    width: calc(40% - 48px);
    margin: 0 30px;
  }
  .ts-body { width: calc(60% + 148px); }
  .ts-side-left .ts-photo,
  .ts-side-right .ts-photo {
    margin: 0 30px;
  }
  .ts-title,
  .ts-text h1,
  .ts-text h2,
  .ts-text h3,
  .ts-text h4,
  .ts-text h5 { font-size: 32px; }
}

@media (max-width: 900px) {
  .ts-strip {
    background: linear-gradient(
      to bottom,
      #fff 0,
      #fff 50px,
      var(--ts-bg, #f0f0f0) 50px,
      var(--ts-bg, #f0f0f0) calc(100% - 50px),
      #fff calc(100% - 50px),
      #fff 100%
    );
  }
  .ts-item {
    display: block;
  }
  .ts-photo,
  .ts-body {
    width: 100%;
    margin: 0;
  }
  .ts-side-left .ts-body,
  .ts-side-right .ts-body {
    padding-left: 0;
    padding-right: 0;
  }
  .ts-photo {
    max-width: 420px;
    margin: 0 auto -28px;
  }
  
  .ts-photo {
    margin: 0 30px;
    margin-left: 30px;
    margin-left: calc(50% - 210px) !important;
  }
  .ts-body {
    display: block;
    text-align: center;
  }
  .ts-body-inner {
    padding: 30px 26px 100px;
    text-align: center;
  }
  .ts-title,
  .ts-text h1,
  .ts-text h2,
  .ts-text h3,
  .ts-text h4,
  .ts-text h5 { font-size: 28px; }
}