@import "@cnbritain/merlin-www-common:gq";
@import "@cnbritain/merlin-www-image:gq";
@import "@cnbritain/merlin-www-card:gq";

@import "../wireframe/wireframe";
@import "./_hero";

.c-splash {}
.c-splash-wrapper {
	background-color: $seashell;
	margin: 0 auto;
	max-width: $MAXIMUM_PAGE_WIDTH;
	position: relative;
	width: 100%;

    @include at-x-large-size {
        display: grid;
        grid-template-columns: auto 37.5%;
    }
}

.c-splash__cards {
	box-sizing: border-box;
	padding: $MOBILE_SLICE_MARGIN $MOBILE_SIDE_GUTTER;

	@include at-medium-size {
		padding-left: $TABLET_SIDE_GUTTER;
		padding-right: $TABLET_SIDE_GUTTER;
	}

	@include at-x-large-size {
		height: 100%;
		padding: 32px;
		position: absolute;
		right: 0;
		top: 0;
		width: 37.5%;
	}
}

.c-splash__cards-wrapper {
	height: 100%;
	overflow: auto;
}
.c-splash__cards-list {
    grid-gap: 20px 0;
    grid-template-columns: 1fr;

    .c-splash__cards-listitem:nth-child(n + 2) {
        .c-card {
            border-top: 1px solid $bon-jour;
            padding-top: 20px;
        }
        .c-card--dark {
            border-top-color: $mineshaft;
        }
    }

    @include at-small-size {
        grid-template-columns: 1fr 1fr;

        .c-splash__cards-listitem:nth-child(2) .c-card {
            border-top: none;
            padding-top: 0;
        }

        .c-splash__cards-listitem:nth-child(odd) .c-card {
            padding-right: 10px;
        }

        .c-splash__cards-listitem:nth-child(even) .c-card {
            padding-left: 10px;
        }
    }

    @include at-x-large-size {
        grid-template-columns: 1fr;
        grid-gap: 24px 0;

        .c-splash__cards-listitem:nth-child(2) .c-card {
            border-top: 1px solid $bon-jour;
            padding-top: 24px;
        }

        .c-splash__cards-listitem:nth-child(odd) .c-card,
        .c-splash__cards-listitem:nth-child(even) .c-card {
            padding-left: 0;
            padding-right: 0;
        }
    }
}
.c-splash__cards-listitem {}