/* Home Page */
#home{
	display: grid;
	grid-template-columns: 0.2fr 1fr;
	grid-column-gap: 4rem ;
	grid-row-gap: 4rem;
}

#home-projects{
	display: grid;
	grid-template-row:  1fr 1fr 1fr;
	grid-row-gap: 2rem;
	margin: 3rem 0 3rem 0;
}

.home-projects-grid{
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-column-gap: 2.2rem ;
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
	align-items: center;
	border-width: 1px 0 1px 1px; /* top right bottom left */
	border-style: solid;
}

#home-about{
	display: grid;
	grid-template-columns: 1fr 0.8fr;
	grid-template-rows: auto;
	grid-column-gap: 5rem ;
}

.home-about-title{
	grid-column: 1 / span 2;
}

.resume-button, .linkedln-button {
	display: flex;
    justify-content: center;
}


/* VSCIA */

.summary-details{
	margin-top: 1rem;
	margin-bottom: 2rem;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

.summary-item{
	margin: 0em 2.5em 0em 2.5em;
}
.summary-item-title{
	margin: 2em 2.5em 0em 2.5em;
}
.vscia-grid, .google-research-grid{
	display: grid;
	grid-template-columns: 0.55fr 1fr;
	margin-top: 1rem;
	margin-bottom: 2rem;
}
.vscia-grid h2, .google-research-grid h2, .grid-twoColumn h2{
	margin-top:0;
}
.vscia-grid h4, .vscia-grid h5, .google-research-grid h4, .grid-twoColumn h4, .grid-twoColumn h5{
	margin-top:0.5rem;
}
.vscia-grid-three{
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-column-gap: 1em;
}
.grid-newline{
	grid-column-start: 1;
}

.highlight, .highlight-ea{
	background-color: #F1F1F1;
	padding: 2.5em 10em;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.greyhighlight{
background-color: #F1F1F1;
}

.highlight-darkgrey{
	background-color: #202020;
	padding: 4em 15em;
	margin-bottom: 4rem;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.img-artist-workshop{
	grid-column: 2/3;
	grid-row-start: 2;
}
.grid-span{
	grid-column:1/3;
}
.center-container-vscia{
	padding: 0em 10em 0em 10em;
}
.uj-img-vscia, .trackling-heuristic-grid{
	display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 0.8em;
}
.uj-img-item{
	flex-direction: column;
}
.card-sort-desc, .userflow-desc{
	grid-column: 2/3;
}

.vscia-solution-grid{
	display: grid;
	grid-template-columns: 0.6fr 0.65fr;
	grid-column-gap: 4.5em;
	margin-top: 1rem;
	margin-bottom: 2rem;
}

/*Trackling*/

.grid-twoColumn-nogap h4{
	margin-top: 0rem;
	margin-bottom: 0rem;
}

.trackling-solution-grid{
	display: grid;
	grid-template-columns: 0.4fr 0.7fr;
	grid-column-gap: 4rem;
	grid-row-gap: 4rem;
	margin-top: 1rem;
	margin-bottom: 2rem;
	display: flex;
	align-items: center;
}
.trackling-solution-dsc{
	width: clamp(30ch, 80%, 75ch);
}

.revision-grid2{
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-column-gap: 1rem;
}

/* Bump */

.center-container-bump{
	padding: 0em 11em 0em 11em;
	text-align: left;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
}
.feature-grid{
	display: grid;
	grid-template-columns: 1fr 0.4fr;
	grid-column-gap: 4em;
	align-items: center;
}
.bump-persona-grid{
	display: grid;
	grid-template-columns: 0.6fr 1fr;
	grid-column-gap: 0.5em;
	align-items: flex-start;
}
p.persona-desc{
	grid-column:1/3;
	margin-top: 1rem;
}
.persona-info-bump{
	justify-content: flex-start;
}
.prototype{
	display: flex;
	justify-content: center;
}


/* EA */
.grid-twoColumn{
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-column-gap: 3em;
	margin-top: 1rem;
	margin-bottom: 2rem;
	align-items: center;
}

#considerations-ea .grid-twoColumn{
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-column-gap: 3em;
	grid-row-gap: 2.5rem;
	margin-top: 1rem;
	margin-bottom: 2rem;
	align-items: center;
}

.grid-twoColumn-ea{
	display: grid;
	grid-template-columns: 1fr 1fr;
	margin: 1rem 7rem 2rem 7rem;
	align-items: center;
}

.ea-solution-grid{
	display: grid;
	grid-template-columns: 0.6fr 1fr;
	grid-column-gap: 6rem;
	grid-row-gap: 4rem;
	margin-top: 1rem;
	margin-bottom: 10rem;
	display: flex;
	align-items: center;
}
#solution-state-ea{
	padding-top: 0rem;
}


/*Google*/
.google-grid{
	display: grid;
	grid-template-columns: 0.55fr 0.75fr;
	grid-column-gap: 5.5em;
	grid-row-gap: 4rem;
	margin-top: 1rem;
	margin-bottom: 2rem;
}
.google-grid li{
	font-size: 0.9rem;
}

.topic-grid-google{
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-column-gap: 1.5em;
	margin-top: 1rem;
	margin-bottom: 2rem;
}

/* About */
.about-grid{
	display: grid;
	grid-template-columns: 0.5fr 0.5fr;
	grid-column-gap: 5em;
}
.SGoal-grid{
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-column-gap: 2em; 
}
.center-container-about{
	padding: 6em 11em 0em 11em;
	text-align: center;
	display: flex;
	flex-direction: column;
}
.about_image{
	border-radius: 0.7em;
}



@media (max-width: 77em){
	.feature-grid {
	    grid-template-columns: 1fr;
	    justify-items:center;
	}
	.feature-item{
		padding: 1.5em 8em 1em 8em; 
	}
	.highlight-darkgrey{
		padding: 4em 13em;
	}
}


@media (max-width: 62em){
	.center-container-vscia, .center-container-bump, .center-container-about{
	    padding: 0em 5em 0em 5em;
	}
	.bump-persona-grid{
	grid-template-columns: 1fr;
	}
	p.persona-desc{
	grid-column:1/2;
	}
	.highlight-darkgrey{
		padding: 4em 10em;
	}
}

@media (max-width: 58em) {
	#home-projects{
		display: grid;
		grid-template-columns: 1fr;
		grid-row-gap: 1rem;
	}
	.vscia-desc{
		margin-bottom: 4em;
	}
	.about-item{
		grid-column-start: 0;
	}
		.highlight-darkgrey{
		padding: 4em 5em;
	}
}

@media (max-width: 43em) {

	#home-projects{
		margin-top: 3rem;
	}
	.summary-grid{
		display: grid;
	}
	.summary-details{
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-column-gap: 6.5em;
		margin: 1em 2em 0em 2em;
	}
	.center-container-vscia,.center-container-bump, .center-container-about {
	    padding: 0em 3.5em 0em 3.5em;
	}
	.vscia-grid, .google-research-grid{
		grid-template-columns: 1fr;
	}
	.img-artist-workshop{
		grid-column: 1/2;
	}
	.grid-span{
		grid-column:1/2;
	}
	.card-sort-desc{
	grid-column: 1/2;
	}


.summary-details {
    	grid-template-columns: 1fr;
    	margin: 1em 2em 0em 2em;
	}
}

@media (max-width: 37em){
	.uj-img-vscia{
		display: block;
	}
	.center-container-vscia, .center-container-bump, .center-container-about {
    	padding: 0em 2em 0em 2em
	}
	.feature-item{
		padding: 1.5em 4em 1em 4em; 
	}
	.feature-grid{
		margin-bottom: 3rem;
	}
	.about-grid{
		grid-template-columns: 1fr
	}
	.about-item a{
		display: flex;
		justify-content: flex-start;
		padding-top: 1.5em;
	}

}

@media (max-width: 32em){
	
	.title-desc-vscia, .title-desc{
		line-height: 1.2em;
		font-size: 1.05em;
		margin-bottom: 1em;
	}
	.summary-details{
		display: grid;
		grid-template-columns: 1fr ;
	}
	.summary-item {
    margin: 1em 3em 0em 2em;
	}
}