/* =========================================================
WORK / CASE STUDY
========================================================= */

.work {
width: 100%;
overflow: hidden;
}

.work strong {
font-weight: var(--font-weight-bold);
}

/* =========================================================
SHARED GRID
========================================================= */

.work__hero,
.work__intro,
.work__split,
.work__statement,
.work__video,
.work__details,
.work__closing {
margin: var(--gap);
}

.work__label,
.work__hero-meta {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: var(--grid-gap);
font-size: var(--font-size-xs);
line-height: var(--line-height-sm);
text-transform: uppercase;

}

.work__label span:first-child,
.work__hero-meta span:first-child {
grid-column: span 2;
}

.work__label span:nth-child(2) {
grid-column: 3 / span 3;
}

/* =========================================================
HERO
========================================================= */

.work__hero {
padding-top: 160px;
padding-bottom: 120px;
}

.work__hero-meta {
margin-bottom: 110px;
}

.work__hero-meta span:nth-child(2) {
grid-column: 3 / span 4;
}

.work__hero-meta span:nth-child(3) {
grid-column: 11 / span 2;
text-align: right;
}

.work__hero-title {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: var(--grid-gap);
margin-bottom: 100px;
}

.work__hero-title h1 {
grid-column: 1 / span 9;
margin: 0;
font-size: clamp(6rem, 15vw, 15rem);
line-height: .72;
letter-spacing: -.075em;
font-weight: var(--font-weight-regular);
}

.work__hero-title p {
grid-column: 10 / span 3;
align-self: end;
margin: 0;
font-size: var(--font-size-sm);
line-height: var(--line-height-sm);
color: var(--text-secondary);
}

.work__hero-media {
width: 100%;
height: 78vh;
overflow: hidden;
border-radius: var(--border-rad);
}

.work__hero-media img {
width: 100%;
height: 100%;
object-fit: cover;
transform: scale(1.08);
}

/* =========================================================
INTRO
========================================================= */

.work__intro {
padding-top: 100px;
padding-bottom: 180px;
border-top: 1px solid var(--line);
}

.work__intro-content {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: var(--grid-gap);
margin-top: 110px;
}

.work__intro-content h2 {
grid-column: 3 / span 7;
margin: 0;
font-size: clamp(3rem, 7vw, 8rem);
line-height: .88;
letter-spacing: -.055em;
font-weight: var(--font-weight-regular);
}

.work__intro-content h2 strong {
font-weight: var(--font-weight-bold);
color: var(--text-muted);
}

.work__intro-copy {
grid-column: 9 / span 4;
align-self: end;
}

.work__intro-copy p {
max-width: 400px;
margin: 0 0 var(--space);
font-size: var(--font-size-md);
line-height: var(--line-height-sm);
color: var(--text-secondary);
}

/* =========================================================
FULL MEDIA
========================================================= */

.work__full-media {
width: calc(100% - (var(--space) * 2));
margin: 0 var(--space) 180px;
}

.work__full-media figure {
margin: 0;
}

.work__full-media img {
display: block;
width: 100%;
height: 90vh;
object-fit: cover;
border-radius: var(--border-rad);
}

.work__full-media figcaption {
display: flex;
justify-content: space-between;
padding-top: var(--gap);
font-size: var(--font-size-xs);
text-transform: uppercase;
color: var(--text-muted);
}

/* =========================================================
SPLIT
========================================================= */

.work__split {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: var(--grid-gap);
padding-bottom: 200px;
}

.work__split-media {
grid-column: 1 / span 7;
}

.work__split-media img {
width: 100%;
height: 85vh;
object-fit: cover;
border-radius: var(--border-rad);
}

.work__split-content {
grid-column: 9 / span 4;
align-self: center;
}

.work__index {
display: block;
margin-bottom: var(--space);
font-size: var(--font-size-xs);
color: var(--text-muted);
}

.work__split-content h2 {
margin: 0 0 var(--space);
font-size: clamp(3rem, 5vw, 6rem);
line-height: .88;
letter-spacing: -.05em;
font-weight: var(--font-weight-regular);
}

.work__split-content p {
max-width: 390px;
margin: 0 0 var(--gap);
font-size: var(--font-size-sm);
line-height: var(--line-height-md);
color: var(--text-secondary);
}

/* =========================================================
STATEMENT
========================================================= */

.work__statement {
padding-top: 160px;
padding-bottom: 200px;
border-top: 1px solid var(--line);
}

.work__statement p {
width: 75%;
margin: 0;
font-size: clamp(4rem, 9vw, 10rem);
line-height: .82;
letter-spacing: -.065em;
}

.work__statement strong {
font-weight: var(--font-weight-bold);
color: var(--text-muted);
}

/* =========================================================
GALLERY
========================================================= */

.work__gallery {
width: calc(100% - (var(--space) * 2));
margin: 0 var(--space) 200px;
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: var(--grid-gap);
align-items: start;
}

.work__gallery-item {
position: relative;
}

.work__gallery-item img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: var(--border-rad);
}

.work__gallery-item span {
display: block;
padding-top: var(--gap);
font-size: var(--font-size-xs);
text-transform: uppercase;
color: var(--text-muted);
}

.work__gallery-item--large {
grid-column: span 7;
}

.work__gallery-item--small {
grid-column: span 5;
}

.work__gallery-item--large img {
height: 80vh;
}

.work__gallery-item--small img {
height: 55vh;
}

.work__gallery-item:nth-child(2) {
margin-top: 160px;
}

.work__gallery-item:nth-child(3) {
grid-column: 3 / span 5;
margin-top: 100px;
}

.work__gallery-item:nth-child(4) {
grid-column: 8 / span 5;
margin-top: 300px;
}

/* =========================================================
VIDEO
========================================================= */

.work__video {
padding-top: 100px;
padding-bottom: 200px;
border-top: 1px solid var(--line);
}

.work__video-frame {
position: relative;
width: 100%;
height: 85vh;
margin-top: 110px;
overflow: hidden;
border-radius: var(--border-rad);
}

.work__video-frame video {
width: 100%;
height: 100%;
object-fit: cover;
}

.work__video-caption {
position: absolute;
right: var(--gap);
bottom: var(--gap);
left: var(--gap);
display: flex;
justify-content: space-between;
font-size: var(--font-size-xs);
text-transform: uppercase;
color: #fff;
}

/* =========================================================
DETAILS
========================================================= */

.work__details {
padding-top: 100px;
padding-bottom: 180px;
border-top: 1px solid var(--line);
}

.work__details-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--grid-gap);
margin-top: 110px;
}

.work__details-grid > div {
min-height: 180px;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: var(--gap);
border: 1px solid var(--line);
border-radius: var(--border-rad);
}

.work__details-grid span {
font-size: var(--font-size-xs);
text-transform: uppercase;
color: var(--text-muted);
}

.work__details-grid strong {
font-size: var(--font-size-md);
line-height: var(--line-height-sm);
font-weight: var(--font-weight-bold);
}

/* =========================================================
CLOSING
========================================================= */

.work__closing {
padding-bottom: 120px;
}

.work__closing-image {
width: 100%;
height: 75vh;
overflow: hidden;
border-radius: var(--border-rad);
}

.work__closing-image img {
width: 100%;
height: 100%;
object-fit: cover;
}

.work__closing-content {

display: grid;
grid-template-columns: repeat(12, 1fr);
gap: var(--grid-gap);
padding-top: var(--gap);
margin-top: 100px;
}

.work__closing-content > span {
grid-column: span 2;
font-size: var(--font-size-xs);
text-transform: uppercase;
color: var(--text-muted);
}

.work__closing-content a {
grid-column: 7 / span 6;
font-size: var(--fs-xxl);
font-weight: var(--font-weight-bold);
line-height: .82;
letter-spacing: -.06em;
color: var(--text);
text-decoration: none;
}

.work__closing-content a span {
display: block;
color: var(--text-muted);
}


/* =========================================================
REVEAL
========================================================= */

.work__reveal {
clip-path: inset(12% 0 12% 0);
}

.work__reveal img {
transform: scale(1.12);
}

/* =========================================================
TABLET
========================================================= */

@media (max-width: 1000px) {

```
.work__hero,
.work__intro,
.work__split,
.work__statement,
.work__video,
.work__details,
.work__closing {
    margin: var(--gap);
}

.work__hero-title h1 {
    grid-column: 1 / span 8;
}

.work__hero-title p {
    grid-column: 9 / span 4;
}

.work__intro-content h2 {
    grid-column: 2 / span 7;
}

.work__intro-copy {
    grid-column: 9 / span 4;
}

.work__split-media {
    grid-column: 1 / span 7;
}

.work__split-content {
    grid-column: 9 / span 4;
}

.work__statement p {
    width: 90%;
}
```

}

/* =========================================================
MOBILE
========================================================= */

@media (max-width: 700px) {

```
.work__hero,
.work__intro,
.work__split,
.work__statement,
.work__video,
.work__details,
.work__closing,
.work__full-media,
.work__gallery {
    width: calc(100% - 30px);
    margin-left: 15px;
    margin-right: 15px;
}

.work__hero {
    padding-top: 130px;
    padding-bottom: 90px;
}

.work__hero-meta,
.work__label {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--gap);
}

.work__hero-meta span:first-child,
.work__label span:first-child {
    grid-column: span 1;
}

.work__label span:nth-child(2) {
    grid-column: 2 / span 2;
}

.work__hero-meta span:nth-child(2) {
    grid-column: 2 / span 2;
}

.work__hero-meta span:nth-child(3) {
    grid-column: 4;
}

.work__hero-title {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--gap);
    margin-bottom: 70px;
}

.work__hero-title h1 {
    grid-column: 1 / -1;
    font-size: clamp(5rem, 25vw, 9rem);
}

.work__hero-title p {
    grid-column: 1 / -1;
    margin-top: var(--space);
}

.work__hero-media {
    height: 65vh;
}

.work__intro {
    padding-top: 70px;
    padding-bottom: 110px;
}

.work__intro-content {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--gap);
    margin-top: 70px;
}

.work__intro-content h2 {
    grid-column: 1 / -1;
    font-size: clamp(3rem, 13vw, 5.5rem);
}

.work__intro-copy {
    grid-column: 1 / -1;
    margin-top: 60px;
}

.work__full-media {
    margin-bottom: 110px;
}

.work__full-media img {
    height: 60vh;
}

.work__full-media figcaption {
    flex-direction: column;
    gap: var(--gap);
}

.work__split {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--gap);
    padding-bottom: 120px;
}

.work__split-media {
    grid-column: 1 / -1;
}

.work__split-media img {
    height: 60vh;
}

.work__split-content {
    grid-column: 1 / -1;
    margin-top: 70px;
}

.work__split-content h2 {
    font-size: clamp(3rem, 13vw, 5rem);
}

.work__statement {
    padding-top: 100px;
    padding-bottom: 120px;
}

.work__statement p {
    width: 100%;
    font-size: clamp(3.2rem, 14vw, 6rem);
}

.work__gallery {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--grid-gap) var(--gap);
    margin-bottom: 120px;
}

.work__gallery-item--large,
.work__gallery-item--small,
.work__gallery-item:nth-child(3),
.work__gallery-item:nth-child(4) {
    grid-column: 1 / -1;
    margin-top: 0;
}

.work__gallery-item--large img,
.work__gallery-item--small img {
    height: 65vh;
}

.work__video {
    padding-top: 70px;
    padding-bottom: 120px;
}

.work__video-frame {
    height: 60vh;
    margin-top: 70px;
}

.work__details {
    padding-top: 70px;
    padding-bottom: 110px;
}

.work__details-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--gap);
    margin-top: 70px;
}

.work__details-grid > div {
    min-height: 160px;
}

.work__closing {
    padding-bottom: 80px;
}

.work__closing-image {
    height: 55vh;
}

.work__closing-content {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--gap);
}

.work__closing-content > span {
    grid-column: span 1;
}

.work__closing-content a {
    grid-column: 2 / -1;
    font-size: clamp(3rem, 13vw, 5rem);
}
```

}




.work__media-gallery {
    margin: var(--gap);
}

.work__media-gallery-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--grid-gap);
    margin-bottom: var(--grid-gap);
}

.work__media-gallery-item,
.work__media-gallery-feature {
    margin: 0;
}

.work__media-gallery-item img,
.work__media-gallery-feature img {
    display: block;
    width: 100%;
    object-fit: cover;
    border-radius: var(--border-rad);
}

.work__media-gallery-item img {
    height: 70vh;
}

.work__media-gallery-feature img {
    height: 90vh;
}

.work__media-gallery figure figcaption {
    display: flex;
    justify-content: space-between;
    padding-top: 15px;
    font-size: var(--font-size-xs);
    line-height: var(--line-height-sm);
    text-transform: uppercase;
    color: var(--text-muted);
}