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

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

.c-splash {
    background-color: $white-smoke;
	box-sizing: border-box;
    margin: 0 auto;
}

.c-splash-wrapper {
    margin: 0 auto;
    max-width: $MAXIMUM_PAGE_WIDTH;
}

.c-splash__cards {
	border-bottom: 1px solid $black;
    margin: 0 0 $MOBILE_SLICE_MARGIN 0;
    padding: 20px $MOBILE_SIDE_GUTTER 25px $MOBILE_SIDE_GUTTER;

    @include at-x-large-size {
        padding-left: 0;
        padding-right: 0;
    }

}

.c-splash__cards-list {
    grid-gap: 25px;
    grid-template-columns: 1fr;

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

    @include at-x-large-size {
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }
}