/* === Website Panel === */

#websitePanelContent {
    padding-left: 10vw;
    padding-right: 10vw;
    padding-bottom: 10vw;
}

#websiteImages {
    position: relative;
    display: grid;
    grid-template-areas:
    "w1 w1 w1"
    "w1 w1 w1"
    "w1 w1 w1"
    ". . ."
    "w2 w2 ."
    "w2 w2 ."
    ". w3 w3"
    ". w3 w3"
    ". . .";
    grid-template-columns: repeat(3, 1fr);
    align-content: center;
    gap: 10rem;
    border: 1px solid #9f9f9f; /* Visible container border */
}

#websiteLines {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999; /* Ensures overlay is on top */
}

#w1,
#w2,
#w3 {
    display: flex;
    justify-content: center;
    align-items: center;
}

#w1 {
    grid-area: w1;
    max-height: 70vh;
}

#w2 {
    grid-area: w2;
    max-height: 50vh;
}

#w3 {
    grid-area: w3;
    max-height: 50vh;
}

#w1 video,
#w3 video {
    display: block;
    max-width: 80%;
    width: auto;
    max-height: 30vh;
    object-fit: contain;
    border: 1px solid #c1c1c1;
    box-sizing: border-box;
}

#w2 img {
    display: block;
    max-width: 80%;
    height: auto;
    border: 1px solid #c1c1c1;
    box-sizing: border-box;
}

#websiteText {
    padding-top: 20vh;
    font-family: 'PPEditorialOld-Regular';
    font-size: 1.1rem;
    line-height: 1.6;
    color: white;
}

#websiteDescription {
    height: 20vh;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 2rem;
}

#websiteDescription h2 {
    font-family: 'PPEditorialOld-UltralightItalic';
    font-size: 2rem;
    color: white;
    margin: 0;
}


/* === Requiem Panel === */

#requiemPanelContent {
    padding-left: 10vw;
    padding-right: 10vw;
    padding-bottom: 10vw;
}

#requiemImages {
    position: relative;
    display: grid;
    grid-template-areas:
    "r1 r1 r1"
    "r1 r1 r1"
    "r1 r1 r1"
    ". . ."
    ". r2 r2"
    ". r2 r2"
    "r3 r3 ."
    "r3 r3 ."
    ". . .";
    grid-template-columns: repeat(3, 1fr);
    align-content: center;
    gap: 10rem;
    border: 1px solid #9f9f9f;
}

#requiemLines {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
}

#r1,
#r2,
#r3 {
    display: flex;
    justify-content: center;
    align-items: center;
}

#r1 {
    grid-area: r1;
}

#r2 {
    grid-area: r2;
}

#r3 {
    grid-area: r3;
}

#r1 img,
#r2 img,
#r3 img {
    display: block;
    max-width: 80%;
    height: auto;
    border: 1px solid #c1c1c1;
    box-sizing: border-box;
}

#requiemText {
    padding-top: 20vh;
    font-family: 'PPEditorialOld-Regular';
    font-size: 1.1rem;
    line-height: 1.6;
    color: white;
}

#requiemDescription {
    height: 20vh;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 2rem;
}

#requiemDescription h2 {
    font-family: 'PPEditorialOld-UltralightItalic';
    font-size: 2rem;
    color: white;
    margin: 0;
}

#requiemDescription a {
    text-decoration: underline;
    font-size: 2rem;
    color: white;
    font-family: 'PPEditorialOld-UltralightItalic';
}


/* === Come Closer Panel === */

#closerPanelContent {
    padding-left: 10vw;
    padding-right: 10vw;
    padding-bottom: 10vw;
}

#closerImages {
    position: relative;
    display: grid;
    grid-template-areas:
    "c1 c1 c1"
    "c1 c1 c1"
    "c1 c1 c1"
    ". . ."
    ". c2 c2"
    ". c2 c2"
    ". c2 c2"
    ". c2 c2"
    "c3 c3 ."
    "c3 c3 ."
    "c3 c3 ."
    "c3 c3 ."
    ". . .";
    grid-template-columns: repeat(3, 1fr);
    align-content: center;
    gap: 10rem;
    border: 1px solid #9f9f9f;
}

#closerLines {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
}

#c1,
#c2,
#c3 {
    display: flex;
    justify-content: center;
    align-items: center;
}


#c1 {
    grid-area: c1;
}

#c2 {
    grid-area: c2;
}

#c3 {
    grid-area: c3;
}

#c1 img,
#c2 img,
#c3 img {
    display: block;
    max-width: 80%;
    height: auto;
    border: 1px solid #c1c1c1;
    box-sizing: border-box;
}

#closerText {
    padding-top: 20vh;
    font-family: 'PPEditorialOld-Regular';
    font-size: 1.1rem;
    line-height: 1.6;
    color: white;
}

#closerDescription {
    height: 20vh;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 2rem;
}

#closerDescription h2 {
    font-family: 'PPEditorialOld-UltralightItalic';
    font-size: 2rem;
    color: white;
    margin: 0;
}

#closerDescription a {
    text-decoration: underline;
    font-size: 2rem;
    color: white;
    font-family: 'PPEditorialOld-UltralightItalic';
}

/* === Raven Panel === */

#ravenPanelContent {
    padding-left: 10vw;
    padding-right: 10vw;
    padding-bottom: 10vw;
    max-width: 1200px;
    margin: 0 auto;
}

#ravenImages {
    position: relative;
    display: grid;
    grid-template-areas:
        "tr1 . tr2"
        "tr1 . tr2"
        "tr1 . tr2"
        ". . ."
        "tr6 tr5 tr5"
        "tr6 tr5 tr5"
        ". . .";
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(7, auto);
    align-content: center;
    gap: 2rem;
    border: 1px solid #9f9f9f;
}

#ravenLines {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
}

/* Grid Items */
#tr1, #tr2, #tr5, #tr6 {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

/* Top Row Images */
#tr1 {
    grid-area: tr1;
    max-height: 30vh;
}

#tr2 {
    grid-area: tr2;
    max-height: 30vh;
}

/* Middle Row Images */
#tr5 {
    grid-area: tr5;
    max-height: 40vh;
}

/* Bottom Row Video */
#tr6 {
    grid-area: tr6;
    max-height: 40vh;
}

/* Image Styling */
#tr1 img,
#tr2 img,
#tr5 img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    border: 1px solid #c1c1c1;
    box-sizing: border-box;
}

/* Video Styling */
#tr6 video {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    border: 1px solid #c1c1c1;
    box-sizing: border-box;
}

/* Text Content */
#ravenText {
    padding-top: 5vh;
    font-family: 'PPEditorialOld-Regular';
    font-size: 1.1rem;
    line-height: 1.6;
    color: white;
}

#ravenDescription {
    height: auto;
    min-height: 20vh;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 2rem;
    padding-bottom: 2rem;
}

#ravenDescription h2 {
    font-family: 'PPEditorialOld-UltralightItalic';
    font-size: 2rem;
    color: white;
    margin: 0;
}

/* === Illustrations Panel === */

#illustrationsPanelContent {
    padding-left: 10vw;
    padding-right: 10vw;
    padding-bottom: 10vw;
}

#illustrationsImages {
    position: relative;
    display: grid;
    grid-template-areas:
    "i1 i1 ."
    "i1 i1 ."
    "i1 i1 ."
    ". i2 i2"
    ". i2 i2"
    ". i2 i2"
    "i3 i3 ."
    "i3 i3 ."
    "i3 i3 ."
        ". i4 i4"
        ". i4 i4"
        ". i4 i4"
    "i5 i5 ."
    "i5 i5 ."
    "i5 i5 ."
       ". i6 i6"
        ". i6 i6"
        ". i6 i6"
        ". . .";
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(18, auto);
    align-content: center;
    gap: 2rem;
    border: 1px solid #9f9f9f;
}

#illustrationsLines {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
}

/* Grid Items */
#i1, #i1, #i3, #i4, #i5, #i6 {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

#i1 {
    grid-area: i1;
    max-height: 40vh;
}

#12 {
    grid-area: i2;
    max-height: 40vh;
}

#13 {
    grid-area: i3;
    max-height: 40vh;
}

#14 {
    grid-area: i4;
    max-height: 40vh;
}

#15 {
    grid-area: i5;
    max-height: 40vh;
}

#16 {
    grid-area: i6;
    max-height: 40vh;
}

/* Image Styling */
#i1 img,
#i2 img,
#i3 img,
#i4 img,
#i5 img,
#i6 img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    border: 1px solid #c1c1c1;
    box-sizing: border-box;
}


#illustrationsDescription {
    height: auto;
    min-height: 20vh;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 2rem;
    padding-bottom: 2rem;
}

#illustrationsDescription h2 {
    font-family: 'PPEditorialOld-UltralightItalic';
    font-size: 2rem;
    color: white;
    margin: 0;
}

/* === After Him Panel === */

#afterhimPanelContent {
    padding-left: 10vw;
    padding-right: 10vw;
    padding-bottom: 10vw;
}

#afterhimImages {
    position: relative;
    display: grid;
    grid-template-areas:
        "ah1 ah1 ah1 ah1"
        "ah1 ah1 ah1 ah1"
        "ah1 ah1 ah1 ah1"
        ". . . ."
        ". ah2 ah2 ."
        ". ah2 ah2 ."
        ". . . ."
        ". ah3 ah3 ."
        ". ah3 ah3 ."
        ". ah4 ah4 ."
        ". ah4 ah4 ."
        ". . . .";
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(12, auto);
    align-content: center;
    gap: 2rem;
    border: 1px solid #9f9f9f;
}

#afterhimLines {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
}

/* Grid Items */
#ah1, #ah2, #ah3, #ah4 {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

#ah1 {
    grid-area: ah1;
    max-height: 50vh;
}

#ah2 {
    grid-area: ah2;
    max-height: 40vh;
}

#ah3 {
    grid-area: ah3;
    max-height: 40vh;
}

#ah4 {
    grid-area: ah4;
    max-height: 40vh;
}

/* Image Styling */
#ah1 img,
#ah2 img,
#ah3 img,
#ah4 img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    border: 1px solid #c1c1c1;
    box-sizing: border-box;
}

/* Text Content */
#afterhimText {
    padding-top: 5vh;
    font-family: 'PPEditorialOld-Regular';
    font-size: 1.1rem;
    line-height: 1.6;
    color: white;
}

#afterhimDescription {
    height: auto;
    min-height: 20vh;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 2rem;
    padding-bottom: 2rem;
}

#afterhimDescription h2 {
    font-family: 'PPEditorialOld-UltralightItalic';
    font-size: 2rem;
    color: white;
    margin: 0;
}

#afterhimDescription a {
    text-decoration: underline;
    font-size: 2rem;
    color: white;
    font-family: 'PPEditorialOld-UltralightItalic';
}