html, body {
scroll-behavior: smooth;
font-family: sans-serif;
font-size: 20px;
line-height: 120%;
margin: 0;
padding: 0;
color: #fff;
background: #000;
}
a {
color: #fff;
text-decoration: underline;
}
img {
display: block;
object-fit: cover;
width: 100%;
aspect-ratio: 1 / 1;
object-position: top center;
}
figure {
margin: 0;
}
p {
margin: 0 0 30px;
}
header {
box-sizing: border-box;
display: flex;
justify-content: space-between;
margin: 0 auto;
padding: 40px 60px;
max-width: 1440px;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
display: flex;
}
nav ul a {
display: block;
margin: 0 0 0 30px;
}
#home img {
margin: 0 0 30px;
}
#home img:first-of-type {
aspect-ratio: unset;
}
#body-content {
margin: 200px auto;
max-width: 1120px;
box-sizing: border-box;
padding: 0 60px;
}
.content-block {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 60px;
margin: 0 0 60px;
text-align: center;
}
#gallery-intro {
margin: 0 0 40px;
}
.gallery-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 30px;
text-align: center;
font-weight: 700;
}
.gallery-grid figure {
overflow: hidden;
}
.gallery-grid img {
margin: 0 0 25px;
}
.interview-archive {
text-align: left;
}
.interview-archive strong {
display: block;
margin: 0 0 30px;
}
.m-by {
display: none !important;
}
@media only screen and (max-width: 800px) {
header {
flex-direction: column;
padding: 30px;
text-align: center;
}
nav ul {
flex-direction: column;
margin: 30px auto 0;
}
nav ul a {
margin: 10px auto;
}
#body-content {
margin: 40px auto 90px;
padding: 0 30px;
}
.content-block, .gallery-grid {
grid-template-columns: repeat(1, 1fr);
}
}