.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;}