.l--timeline .l__main {
  -ms-grid-columns: 50% 50%;
      grid-template-columns: 50% 50%; }
  .l--timeline .l__main .l__primary {
    border-right: 10px solid black; }

.l--timeline .l__main {
  -ms-grid-columns: 50% 50%;
      grid-template-columns: 50% 50%; }

@media (min-width: 992px) {
  .l--timeline .l__main .l__primary {
    border-right: 3px solid #f0f0f0; } }

.l--timeline ul {
  margin-bottom: 2rem; }

.l--timeline li {
  margin-bottom: 0.8rem; }

.l--timeline li::marker {
  color: #c4c4c4; }

.l--timeline .l--padded {
  padding: 0; }

.l--timeline .l__main {
  margin-top: 0; }

@media (min-width: 992px) {
  .l--timeline .l__secondary .field--name-field-period-title:before {
    content: '';
    width: 20px;
    height: 20px;
    background-color: #c9913d;
    position: absolute;
    z-index: 2;
    border-radius: 50px;
    font-size: 10px;
    display: block;
    left: -79px;
    top: 45px; }
  .l--timeline .l__primary h2:after {
    right: -79px;
    content: '';
    width: 20px;
    height: 20px;
    background-color: #c9913d;
    position: absolute;
    z-index: 2;
    border-radius: 50px;
    font-size: 10px;
    display: block;
    top: 15px; } }

@media (max-width: 1260px) {
  .l--timeline .l__secondary .field--name-field-period-title:before {
    left: -57px; }
  .l--timeline .l__primary h2:after {
    right: -57px; } }

.l--timeline h2,
.l--timeline h3 {
  position: relative;
  margin: 0;
  text-transform: uppercase; }

@media (min-width: 992px) {
  .l--timeline .l__primary h2,
  .l--timeline .l__primary h3 {
    text-align: right;
    margin-right: 1.2rem; }
  .l--timeline .l__secondary h2,
  .l--timeline .l__secondary h3 {
    margin-left: 1.2rem; }
  .l--timeline .l__primary ul {
    max-width: 400px;
    margin-left: auto; }
  .l--timeline .l__secondary ul {
    max-width: 400px; } }

@media (max-width: 991px) {
  .l--timeline {
    margin-bottom: 30px; } }