* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
:root {
    font-size: 62.5;
}

body {
    background-color: #EEE;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    color: rgb(27, 27, 27);
}

/* Grid-Based Photo Layout */

.grid header {
    /* border: 2px solid red; */
    margin: 5% 5% 8px 5%;
}
.grid header h1 {
    font-size: clamp(16px, 5vw, 80px);
    color: rgb(78, 1, 78);
    letter-spacing: -1;
}

.grid article {
    /* border: 2px solid hotpink; */
    margin: 0 5%;
    display: flex;
    flex-flow: row wrap;
}
.grid article p {
    font-size: clamp(8px, 3vw, 48px);
    line-height: 4vw;
    width: 78%;
    padding-right: 2%;
}
.grid article div#portrait {
    /* border: 2px solid blue; */
    width: 22%;
}
.grid article div#portrait figure {
    background-image: url(../images/thomas-marzetta.png);
    background-size: cover;
    width: 100%;
    aspect-ratio: 1;
}
.grid article div#portrait figcaption {
    margin-top: 4px;
}
.grid article div#portrait figcaption h2 {
    font-size: clamp(10px, 1.5vw, 20px);
}
.grid article div#portrait figcaption p {
    font-size: clamp(10px, 1.5vw, 20px);
    padding-right: 0;
    width: 100%;
    line-height: normal;
}

.grid section {
    /* border: 2px solid green; */
    display: flex;
    flex-flow: row wrap;
    gap: 2%;
    row-gap: 2vw;
    margin-top: 30px;
}
.grid section div {
    width: 49%;
    /* border: 2px solid black; */
    aspect-ratio: 5/4;
    background-size: cover;
}
.grid section div#img1 {
    background-image: url(../images/woman-smiling.png);
}
.grid section div#img2 {
    background-image: url(../images/group-smiling.png);
}
.grid section div#img3 {
    background-image: url(../images/man-pointing.png);
}
.grid section div#img4 {
    background-image: url(../images/crowd-looking.png);
}


/* Text Heavy Layout */

body.text {

}
.text header {
    margin: 5% 5% 0 25%;
}
.text header h1 {
    font-size: clamp(16px, 5vw, 80px);
    color: rgb(78, 1, 78);
    letter-spacing: -1;
    line-height: 6vw;
    padding-bottom: 10px;
}
.text header p {
    font-size: clamp(8px, 3vw, 48px);
    line-height: 4vw;
}

.text article {
    /* border: 2px solid red; */
    margin: 10px 0 0 0;
    column-count: 2;
    column-gap: 5%;
    padding: 0 5% 0 25%;
}
.text article p.main {
    font-size: clamp(8px, 2vw, 24px);
    text-align: justify;
    line-height: 2.8vw;
    hyphens: auto;
    /* border: 2px solid purple; */
}
.text article aside.pull-quote {
    /* border: 2px solid purple; */
    color: rgb(0, 94, 94);
    width: 150%;
    transform: translateX(-35%);
    margin: 10px 0 15px 0;
}
.text article aside h2 {
    font-size: clamp(8px, 2.8vw, 48px);
    line-height: 3.9vw;
    letter-spacing: -1;
}
.text article aside p {
    font-size: clamp(8px, 1.3vw, 14px);
    font-weight: bold;
    padding-top: 4px;
}

.text footer {
    font-size: clamp(8px, 1.5vw, 24px);
    padding: 3% 0 3% 8%;
    font-weight: bold;
}