<div class="o-grid6 row no-gutters">
	<div class="o-grid6__column col-md-12">
		<div class="o-grid6__inner">
			<p class="o-grid6__title">
				<a href="#" target="_self" class="text-underline-never">
					<strong> Title 01 </strong>
				</a>
			</p>
			<p class="o-grid6__perex"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do&nbsp;eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
		</div>
	</div>
	<div class="o-grid6__column o-grid6__column--background col-md-12">
		<a href="#" target="_self" class="o-grid6__background a-background a-background--cover">
			<img -src="https://placehold.it/700x700" loading="lazy" width="700" height="700" alt="Title 01">
		</a>
	</div>
</div>
<div class="o-grid6 row no-gutters">
	<div class="o-grid6__column col-md-12">
		<div class="o-grid6__inner">
			<p class="o-grid6__title">
				<a href="#" target="_self" class="text-underline-never">
					<strong> Title 02 </strong>
				</a>
			</p>
			<p class="o-grid6__perex"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do&nbsp;eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
		</div>
	</div>
	<div class="o-grid6__column o-grid6__column--background col-md-12">
		<a href="#" target="_self" class="o-grid6__background a-background a-background--cover">
			<img -src="https://placehold.it/700x700" loading="lazy" width="700" height="700" alt="Title 01">
		</a>
	</div>
</div>

@import "atoms/background/index";

.o-grid6 {

    $self: &;

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

        &:nth-child(odd) {

            #{$self}__column {

                &:nth-child(odd) {

                    order: 2;
                }

                &:nth-child(even) {

                    order: 1;

                }

            }

        }

    }

    &__column {

        display: flex;

        &--background {

            position: relative;
            z-index: 0;

            &:after {

                content: '';
                display: block;
                padding-bottom: 56.25%;

            }

        }

    }

    &__inner {

        display: flex;
        flex: 1 0 100%;
        flex-direction: column;
        max-width: 100%;
        padding: space(2);

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

            padding: space(3);

        }

        &:link {

            @include text-underline(none);

        }

    }

    &__top {

        margin-bottom: auto;

    }

    &__middle {

        margin-bottom: auto;
        margin-top: auto;

    }

    &__bottom {

        margin-top: auto;

    }

    #{&} &__title {

        margin-bottom: 0;
        margin-top: space(2);

    }

}