<div class="o-timeline1">
	<div class="o-timeline1__row row">
		<div class="o-timeline1__line col-8 col-md-4 my-0 order-md-2">
			<div class="o-timeline1__point">
				<div class="o-timeline1__point__text"><strong>2018</strong></div>
			</div>
		</div>
		<div class="col-16 col-md-10 my-0 order-md-1">
			<div class="o-timeline1__item">
				<p class="o-timeline1__title">
					<strong> Timeline item </strong>
				</p>
				<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae...</p>
				<a href="https://placehold.it/1024x768/" class="lightbox">
					<img src="https://placehold.it/300x300/" alt="Timeline item" loading="lazy" width="300" height="300">
				</a>
			</div>
		</div>
	</div>
	<div class="o-timeline1__row row o-timeline1__row--pull">
		<div class="o-timeline1__line col-8 col-md-4 my-0 offset-md-10">
		</div>
		<div class="col-16 col-md-10 my-0">
			<div class="o-timeline1__item">
				<p class="o-timeline1__title">
					<strong> Timeline item </strong>
				</p>
				<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae...</p>
				<a href="https://placehold.it/1024x768/" class="lightbox">
					<img src="https://placehold.it/300x300/" alt="Timeline item" loading="lazy" width="300" height="300">
				</a>
			</div>
		</div>
	</div>
	<div class="o-timeline1__row row">
		<div class="o-timeline1__line col-8 col-md-4 my-0 order-md-2">
			<div class="o-timeline1__point">
				<div class="o-timeline1__point__text"><strong>2017</strong></div>
			</div>
		</div>
		<div class="col-16 col-md-10 my-0 order-md-1">
			<div class="o-timeline1__item">
				<p class="o-timeline1__title">
					<strong> Timeline item </strong>
				</p>
				<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae...</p>
				<a href="https://placehold.it/1024x768/" class="lightbox">
					<img src="https://placehold.it/300x300/" alt="Timeline item" loading="lazy" width="300" height="300">
				</a>
			</div>
		</div>
	</div>
	<div class="o-timeline1__row row">
		<div class="o-timeline1__line col-8 col-md-4 my-0 offset-md-10">
			<div class="o-timeline1__point">
				<div class="o-timeline1__point__text"><strong>2016</strong></div>
			</div>
		</div>
		<div class="col-16 col-md-10 my-0">
			<div class="o-timeline1__item">
				<p class="o-timeline1__title">
					<strong> Timeline item </strong>
				</p>
				<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae...</p>
				<a href="https://placehold.it/1024x768/" class="lightbox">
					<img src="https://placehold.it/300x300/" alt="Timeline item" loading="lazy" width="300" height="300">
				</a>
			</div>
		</div>
	</div>
</div>

.o-timeline1 {

    $self: &;

    margin: 0 auto;
    max-width: map-get($container-max-widths, 'md');
    position: relative;
    z-index: 0;

    &__line {

        display: flex;
        flex-direction: column;

        &:after {

            border-right: 1px solid color('gray-light');
            content: '';
            flex-grow: 1;
            width: 50%;

        }

    }

    &__row {

        margin-bottom: 0;
        margin-top: 0;

        &:not(:last-child) {

            #{$self}__item {

                @media(min-width: breakpoint-min(md)) {

                    padding-bottom: space(4);

                }

            }

        }

        &--pull {

            @media(min-width: breakpoint-min(md)) {

                margin-top: space(4) * -2;

            }

        }

    }

    &__point {

        border: 1px solid color('gray-light');
        border-radius: 50%;
        padding-bottom: 100%;
        position: relative;
        width: 100%;

        &__text {

            left: 0;
            position: absolute;
            text-align: center;
            top: 50%;
            transform: translateY(-50%);
            width: 100%;

        }

    }

    & #{$self}__title {

        margin-top: space(2);

        @media(min-width: breakpoint-min(md)) {

            margin-top: space(3);

        }

    }

}