<div class="o-grid12">
	<div class="o-grid12__column o-grid12__column--1">
		<a href="#" target="_self" class="o-grid12__inner">
			<div class="o-grid12__image">
				<img src="https://placehold.it/710x380/" width="710" height="380" loading="lazy" alt="Preview">
			</div>
			<div class="o-grid12__content">
				<p class="o-grid12__title">
					<strong> Title 01 </strong>
				</p>
			</div>
		</a>
	</div>
	<div class="o-grid12__column o-grid12__column--2">
		<a href="#" target="_self" class="o-grid12__inner">
			<div class="o-grid12__image">
				<img src="https://placehold.it/370x370/" loading="lazy" width="370" height="370" alt="Preview">
			</div>
			<div class="o-grid12__content">
				<p class="o-grid12__title">
					<strong> Title 02 </strong>
				</p>
			</div>
		</a>
	</div>
	<div class="o-grid12__column o-grid12__column--3">
		<a href="#" target="_self" class="o-grid12__inner">
			<div class="o-grid12__image">
				<img src="https://placehold.it/370x370/" loading="lazy" width="370" height="370" alt="Preview">
			</div>
			<div class="o-grid12__content">
				<p class="o-grid12__title">
					<strong> Title 03 </strong>
				</p>
			</div>
		</a>
	</div>
	<div class="o-grid12__column o-grid12__column--4">
		<a href="#" target="_self" class="o-grid12__inner">
			<div class="o-grid12__image">
				<img src="https://placehold.it/370x370/" loading="lazy" width="370" height="370" alt="Preview">
			</div>
			<div class="o-grid12__content">
				<p class="o-grid12__title">
					<strong> Title 04 </strong>
				</p>
			</div>
		</a>
	</div>
	<div class="o-grid12__column o-grid12__column--5">
		<a href="#" target="_self" class="o-grid12__inner">
			<div class="o-grid12__image">
				<img src="https://placehold.it/370x370/" loading="lazy" width="370" height="370" alt="Preview">
			</div>
			<div class="o-grid12__content">
				<p class="o-grid12__title">
					<strong> Title 05 </strong>
				</p>
			</div>
		</a>
	</div>
</div>

@import "atoms/background/index";

@import "atoms/button/index";

.o-grid12 {

    $self: &;

    display: grid;
    grid-gap: $grid-gutter-width;
    grid-template-columns: 1fr;
    grid-template-rows: auto;

    @media (min-width: 430px) {

        grid-template-columns: 1fr 1fr;

        &__column {

            &--1 {

                grid-column: 1/ span 2;
                grid-row: 1;

            }

            &--2 {

                grid-column: 1;
                grid-row: 2;

            }

            &--3 {

                grid-column: 2;
                grid-row: 2;

            }

            &--4 {

                grid-column: 1;
                grid-row: 3;

            }

            &--5 {

                grid-column: 2;
                grid-row: 3;

            }

        }

    }

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

        grid-template-columns: repeat(3, 1fr);

        &__column {

            &--1 {

                grid-column: 1/ span 2;
                grid-row: 1;

            }

            &--2 {

                grid-column: 3;
                grid-row: 1;

            }

            &--3 {

                grid-column: 1;
                grid-row: 2;

            }

            &--4 {

                grid-column: 2;
                grid-row: 2;

            }

            &--5 {

                grid-column: 3;
                grid-row: 2;

            }

        }

    }

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

        grid-template-columns: repeat(5, 1fr);

        &__column {

            &--1 {

                grid-column: 2/ span 3;
                grid-row: 1/ span 2;

            }

            &--2 {

                grid-column: 1;
                grid-row: 1;

            }

            &--3 {

                grid-column: 1;
                grid-row: 2;

            }

            &--4 {

                grid-column: 5;
                grid-row: 1;

            }

            &--5 {

                grid-column: 5;
                grid-row: 2;

            }

        }

    }

    &__column {

        display: flex;

    }

    &__inner {

        background: color('white');
        display: flex;
        flex-direction: column;
        flex: 1 0 100%;
        max-width: 100%;

        &:link {

            @include text-underline(none);

        }

        > * {

            flex: 0 0 auto;

        }

    }

    &__content {

        padding: space(2);

    }

    &__title {

        margin: 0;

        + #{$self}__perex {

            margin-top: space(1);

        }

    }

    &__perex {

        margin: 0;

    }

    &__image {

        background-color: color('gray');
        flex-grow: 1;
        position: relative;

        &:before {

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

        }

        img {

            font-family: "object-fit: cover; object-position: 50% 50%";
            height: 100%;
            left: 0;
            object-fit: cover;
            object-position: 50%;
            position: absolute;
            top: 0;
            width: 100%;

        }

    }

}