<div class="o-grid4 row no-gutters">
	<div class="o-grid4__item col-xl-12">
		<div class="o-grid4__column o-grid4__column--text">
			<p class="o-grid4__title">
				<a href="#" target="_self" class="text-underline-never">
					<strong> Title 01 </strong>
				</a>
			</p>
			<p class="o-grid4__perex"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do&nbsp;eiusmod tempor incididunt ut </p>
			<a href="#" target="_self" class="a-button a-button--block"> Detail </a>
		</div>
		<div class="o-grid4__column o-grid4__column--background">
			<a href="#" target="_self" class="o-grid4__background a-background a-background--cover">
				<img src="https://placehold.it/300x300" srcset="https://placehold.it/300x300/ 1x, https://placehold.it/600x600/ 2x" alt="Title 01" loading="lazy" width="300" height="300">
			</a>
		</div>
	</div>
	<div class="o-grid4__item col-xl-12">
		<div class="o-grid4__column o-grid4__column--text">
			<p class="o-grid4__title">
				<a href="#" target="_self" class="text-underline-never">
					<strong> Title 01 </strong>
				</a>
			</p>
			<a href="#" target="_self" class="a-button a-button--block"> Detail </a>
		</div>
		<div class="o-grid4__column o-grid4__column--background">
			<a href="#" target="_self" class="o-grid4__background a-background a-background--cover">
				<img src="https://placehold.it/300x300" srcset="https://placehold.it/300x300/ 1x, https://placehold.it/600x600/ 2x" alt="Title 01" loading="lazy" width="300" height="300">
			</a>
		</div>
	</div>
	<div class="o-grid4__item col-xl-12">
		<div class="o-grid4__column o-grid4__column--text">
			<p class="o-grid4__title">
				<a href="#" target="_self" class="text-underline-never">
					<strong> Title 01 </strong>
				</a>
			</p>
			<p class="o-grid4__perex"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do&nbsp;eiusmod tempor incididunt ut </p>
			<a href="#" target="_self" class="a-button a-button--block"> Detail </a>
		</div>
		<div class="o-grid4__column o-grid4__column--background">
			<a href="#" target="_self" class="o-grid4__background a-background a-background--cover">
				<img src="https://placehold.it/300x300" srcset="https://placehold.it/300x300/ 1x, https://placehold.it/600x600/ 2x" alt="Title 01" loading="lazy" width="300" height="300">
			</a>
		</div>
	</div>
	<div class="o-grid4__item col-xl-12">
		<div class="o-grid4__column o-grid4__column--text">
			<p class="o-grid4__title">
				<a href="#" target="_self" class="text-underline-never">
					<strong> Title 01 </strong>
				</a>
			</p>
			<p class="o-grid4__perex"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do&nbsp;eiusmod tempor incididunt ut </p>
			<a href="#" target="_self" class="a-button a-button--block"> Detail </a>
		</div>
		<div class="o-grid4__column o-grid4__column--background">
			<a href="#" target="_self" class="o-grid4__background a-background a-background--cover">
				<img src="https://placehold.it/300x300" srcset="https://placehold.it/300x300/ 1x, https://placehold.it/600x600/ 2x" alt="Title 01" loading="lazy" width="300" height="300">
			</a>
		</div>
	</div>
</div>

@import "atoms/background/index";

@import "atoms/button/index";

.o-grid4 {

    $self: &;

    &__item {

        display: flex;
        flex-wrap: wrap;

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

            &:nth-child(4n + 1),
            &:nth-child(4n + 3) {

                #{$self}__column {

                    &:nth-child(1) {

                        order: 2;

                    }

                    &:nth-child(2) {

                        order: 1;

                    }

                }

            }

        }

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

            &:nth-child(4n + 2) {

                #{$self}__column {

                    &:nth-child(1) {

                        order: 2;

                    }

                    &:nth-child(2) {

                        order: 1;

                    }

                }

            }

            &:nth-child(4n + 3) {

                #{$self}__column {

                    &:nth-child(1) {

                        order: 1;

                    }

                    &:nth-child(2) {

                        order: 2;

                    }

                }

            }

        }

    }

    &__column {

        flex: 0 0 100%;
        max-width: 100%;
        width: 100%;

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

            flex: 0 0 50%;
            max-width: 50%;

        }

        &--text {

            align-self: center;
            padding: space(2);

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

                padding: space(3);

            }

        }

        &--background {

            position: relative;

            &:after {

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

            }

        }

    }

    &__title {

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

    }

    &__background {

        background-position: center;
        background-size: cover;
        z-index: 0;

    }

}