<div class="o-grid7">
	<div class="o-grid7__item o-grid7__item--big">
		<a href="#" target="_self" class="o-grid7__inner">
			<div class="o-grid7__column">
				<p class="o-grid7__title">
					<strong> Title 01 </strong>
				</p>
				<p class="o-grid7__perex"> Ut enim ad minim veniam, quis nostrud ut aliquip ex ea commodo consequat. </p>
			</div>
			<div class="o-grid7__background a-background a-background--cover bg-gray-light">
				<img src="https://placehold.it/500x500/" loading="lazy" width="500" height="500" alt="Title 01">
			</div>
		</a>
	</div>
	<div class="o-grid7__item o-grid7__item--landscape">
		<a href="#" target="_self" class="o-grid7__inner">
			<div class="o-grid7__column">
				<p class="o-grid7__title">
					<strong> Title 01 </strong>
				</p>
				<p class="o-grid7__perex"> Ut enim ad minim veniam, quis nostrud ut aliquip ex ea commodo consequat. </p>
			</div>
			<div class="o-grid7__background a-background a-background--cover bg-gray-light">
				<img src="https://placehold.it/500x500/" loading="lazy" width="500" height="500" alt="Title 01">
			</div>
		</a>
	</div>
	<div class="o-grid7__item">
		<a href="#" target="_self" class="o-grid7__inner">
			<div class="o-grid7__column">
				<p class="o-grid7__title">
					<strong> Title 01 </strong>
				</p>
				<p class="o-grid7__perex"> Ut enim ad minim veniam, quis nostrud </p>
			</div>
			<div class="o-grid7__background a-background a-background--cover bg-gray-light">
				<img src="https://placehold.it/500x500/" loading="lazy" width="500" height="500" alt="Title 01">
			</div>
		</a>
	</div>
	<div class="o-grid7__item">
		<a href="#" target="_self" class="o-grid7__inner">
			<div class="o-grid7__column">
				<p class="o-grid7__title">
					<strong> Title 01 </strong>
				</p>
				<p class="o-grid7__perex"> Ut enim ad minim veniam, quis nostrud </p>
			</div>
			<div class="o-grid7__background a-background a-background--cover bg-gray-light">
				<img src="https://placehold.it/500x500/" loading="lazy" width="500" height="500" alt="Title 01">
			</div>
		</a>
	</div>
	<div class="o-grid7__item">
		<a href="#" target="_self" class="o-grid7__inner">
			<div class="o-grid7__column">
				<p class="o-grid7__title">
					<strong> Title 01 </strong>
				</p>
				<p class="o-grid7__perex"> Ut enim ad minim veniam, quis nostrud </p>
			</div>
			<div class="o-grid7__background a-background a-background--cover bg-gray-light">
				<img src="https://placehold.it/500x500/" loading="lazy" width="500" height="500" alt="Title 01">
			</div>
		</a>
	</div>
	<div class="o-grid7__item">
		<a href="#" target="_self" class="o-grid7__inner">
			<div class="o-grid7__column">
				<p class="o-grid7__title">
					<strong> Title 01 </strong>
				</p>
				<p class="o-grid7__perex"> Ut enim ad minim veniam, quis nostrud </p>
			</div>
			<div class="o-grid7__background a-background a-background--cover bg-gray-light">
				<img src="https://placehold.it/500x500/" loading="lazy" width="500" height="500" alt="Title 01">
			</div>
		</a>
	</div>
	<div class="o-grid7__item">
		<a href="#" target="_self" class="o-grid7__inner">
			<div class="o-grid7__column">
				<p class="o-grid7__title">
					<strong> Title 01 </strong>
				</p>
				<p class="o-grid7__perex"> Ut enim ad minim veniam, quis nostrud </p>
			</div>
			<div class="o-grid7__background a-background a-background--cover bg-gray-light">
				<img src="https://placehold.it/500x500/" loading="lazy" width="500" height="500" alt="Title 01">
			</div>
		</a>
	</div>
	<div class="o-grid7__item">
		<a href="#" target="_self" class="o-grid7__inner">
			<div class="o-grid7__column">
				<p class="o-grid7__title">
					<strong> Title 01 </strong>
				</p>
				<p class="o-grid7__perex"> Ut enim ad minim veniam, quis nostrud </p>
			</div>
			<div class="o-grid7__background a-background a-background--cover bg-gray-light">
				<img src="https://placehold.it/500x500/" loading="lazy" width="500" height="500" alt="Title 01">
			</div>
		</a>
	</div>
</div>

@import "atoms/background/index";

$grid7-gutter: 5px;

.o-grid7 {

    $self: &;

    @include clearfix();
    margin: -($grid7-gutter);

    &__item {

        display: block;
        float: left;
        padding: $grid7-gutter;
        width: 100%;

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

            width: 50%;

        }

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

            width: 25%;

        }

        &--landscape,
        &--big {

            width: 100%;

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

                #{$self}__column {

                    padding: space(4);

                }

            }

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

                width: 50%;

            }

        }

        &--landscape {

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

                #{$self}__column {

                    padding: space(2);

                }

            }

        }

        &--big {

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

                #{$self}__inner {

                    padding-top: $grid7-gutter - 1px;

                }

            }

        }

    }

    &__inner {

        display: flex;
        position: relative;
        z-index: 0;

        &:before {

            content: '';
            margin-left: -1px;
            padding-bottom: 100%;
            width: 1px;

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

                #{$self}__item--landscape & {

                    padding-bottom: 50%;

                }

            }

        }

        &:link {

            @include text-underline(none);

        }

    }

    &__column {

        align-self: center;
        padding: space(1);
        position: relative;
        text-align: center;
        z-index: 1;

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

            padding: space(2);

        }

    }

    &__background {

        background-position: center;
        background-size: cover;

    }

}