motarawneh.com/assets/scss/pages/index.scss

.section-header {
	font-size: 1.5em;
	@media (min-width: 600px) {font-size: 2em}
	@media (min-width: 768px) {font-size: 2.5em}
	font-weight: 700;
	margin-bottom: 0.7em;
	line-height: 1.2;
}
/* personal summary */
.personal-summary {
	background: #eee;
	.container {
		display: grid;
	}
	img {
		width: 100%;
		height: auto;
		max-width: 400px;
		justify-self: center;
		margin-bottom: 1em;
	}
	h2 {}
	p {
		line-height: 1.4;
		font-size: 1em;
		@media (min-width: 600px) {font-size: 1.25em}
		@media (min-width: 768px) {font-size: 1.5em}
	}
	em {font-weight: 700;}
	@media (min-width: 600px) {
		.container {
		grid-template-rows: auto 1fr;
		grid-template-columns: minmax(40ch,65ch) minmax(160px,1fr);
		grid-template-areas:
			"title image"
			"blurb image";
		grid-gap: 0 1em;
		}
		img {grid-area: image;}
	}
}

.cta {
	display: flex;
	flex-flow: row wrap;
	justify-content: flex-end;
	width: 100%;
	a {
		display: flex;
		box-sizing: border-box;
		color: #00a3ff;
		text-decoration: none;
		justify-content: center;
		align-items: center;
		padding: 0.5em;
		border-radius: 4px;
		margin-bottom: 0.5em;
		transition: background 0.4s ease-in-out;
		i {margin-right: 0.5em;}
	}
	a:first-child {
		margin-right: 1em;
		background: #00a3ff;
		color: white;
	}
	a:not(:first-child) {
		border: 2px solid #00a3ff;
	}
	a:hover {background: rgba(#00a3ff,0.4)}
}

/* about logos */

.organization-logos {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	align-items: center;
	br {display: none;}
	img {
		flex-basis: 50%;
		width: 50%;
		height: 100%;
		padding: 1em;
		@media (min-width: 480px) {
			flex-basis: 25%;
			width: 25%;
		}
	}
	img:first-child, img:nth-child(3) {
		flex-basis: 100%;
		width: 100%;
		@media (min-width: 480px) {
			flex-basis: 50%;
			width: 50%;
			max-width: unset;
		}
	}
	margin-bottom: 2em;
}

/* latest media */

.media-list {
	display: grid;
	grid-gap: 1em;
	grid-template-columns: repeat(auto-fit,minmax(240px,1fr));
}
.media-item {
	padding: 1em;
	background: #ddd;
	color: inherit;
	text-decoration: none;
	transition: opacity 0.2s ease-in-out;
	&:hover {opacity: 0.6}
	font-size: 1.25em;
	line-height: 1.4;
	display: flex;
	align-items: center;
}

/* contact section */
#contact {background: #eee;}
#contact .container {
	display: flex; flex-flow: column; align-items: center;
	@media (min-width: 600px) {flex-flow: row-reverse; justify-content: space-between; gap: 2em}
}
#contact .section-header {max-width: 480px; text-align: center;}
.h-card {
	display: flex;
	flex-flow: row wrap;
	align-items: center;
	max-width: 320px;
	background: white;
	box-shadow: 2px 2px 6px rgba(0,0,0,0.2);
	border-radius: 2px;
	.u-photo {width: 120px; flex-grow: 1;}
	.info {
		flex-grow: 1;
		padding: 1em;
		font-size: 1em;
		@media (min-width: 320px) {font-size: 1.2em;}
	}
	.p-name {font-size: inherit; font-weight: 700;}
}
.contact-methods {margin-bottom: 0.7em;}
.contact-method {line-height: 1.4}
.contact-method i {margin-right: 0.5em;}