/*-------
Basic responsive layout for all browsers:
------*/

.main-area > * {
	max-width: 50em;
	margin: 0 auto;
}

/*--------------------------------------------------------------
CSS Grid layout for wider screens, when browser supports grid:
--------------------------------------------------------------*/
@supports (grid-area: auto) {

	@media screen and (min-width: 20000px) {


		/* Four-column layout. Two center columns have a total max width of 50em: */
		.main-area > * {
            max-width: none;
        	/*margin: 0;*/
			display: grid;
			grid-template-columns: 1fr repeat(2, minmax(auto, 25em)) 1fr;
		}

		/* Center items by placing them in the two center columns: */
		.splash-content,
		.more-content,
		.buckets ul {
			grid-column: 2/4;
		}

		/* Use automatic grid placement + span to let each item span two columns:*/
		.twin,
		.colophon aside {
			grid-column: span 2;
		}

		.masthead {
            grid-area: header;
			display: grid;
			grid-template-columns: 2.1fr 1fr;
        }

			.identity {
				display: flex;
				flex-direction: column;
				justify-content: center;
				grid-column: 1/2;
				grid-row: 1/2;
				height: 100%;
				background: hsla(246, 40%, 30%, .6);
				color: white;
				z-index: 1;
			}

			.feature {
				grid-column: 1/3;
				grid-row: 1/2;
			}

	}
}