/* =========================================================
MARTIN HIRTREITER PHOTOGRAPHY
GALLERY STYLESHEET
========================================================= */

/* =========================================================
01 — GALLERY HEADER
========================================================= */

.gallery-header {


padding:
    5vh var(--page-padding)
    4vh;

display:
    flex;

align-items:
    flex-start;

gap:
    30px;


}

.gallery-header-number {


padding-top:
    10px;

font-size:
    9px;

color:
    var(--text-soft);

letter-spacing:
    0.12em;


}

.gallery-header h1 {


font-size:
    clamp(45px, 7vw, 105px);

font-weight:
    400;

line-height:
    0.9;

letter-spacing:
    -0.065em;


}

.gallery-header h1 em {


font-family:
    Georgia,
    "Times New Roman",
    serif;

font-weight:
    400;


}

.gallery-subtitle {

    margin-top:
        22px;

    font-size:
        9px;

    text-transform:
        uppercase;

    letter-spacing:
        0.14em;

    color:
        var(--text-soft);

}

/* =========================================================
02 — GALLERY
========================================================= */

.gallery {


width:
    100%;

padding:
    0 var(--page-padding)
    0.5vw;

box-sizing:
    border-box;


}

/* =========================================================
03 — ROWS
========================================================= */

.gallery-row {


width:
    100%;

margin:
    0 0 2.5vw 0;

box-sizing:
    border-box;


}

/* =========================================================
04 — LANDSCAPE ROW
========================================================= */

.gallery-row.landscape {


display:
    flex;

justify-content:
    center;

align-items:
    center;


}

.gallery-row.landscape .gallery-item {


display:
    flex;

justify-content:
    center;

width:
    100%;


}

.gallery-row.landscape .gallery-item img {


display:
    block;

width:
    auto;

height:
    auto;

max-width:
    100%;

max-height:
    94vh;

object-fit:
    contain;


}

/* =========================================================
05 — PORTRAIT ROW
========================================================= */

.gallery-row.portraits {


display:
    flex;

justify-content:
    center;

align-items:
    flex-start;

gap:
    1.2vw;


}

.gallery-row.portraits .gallery-item {


flex:
    0 1 auto;

height:
    94vh;

max-width:
    calc(
        (100vw - (2 * var(--page-padding)) - 1.2vw) / 2
    );


}

/* =========================================================
06 — PORTRAIT IMAGES
========================================================= */

.gallery-row.portraits .gallery-item img {


display:
    block;

width:
    auto;

height:
    94vh;

max-width:
    calc(
        (100vw - (2 * var(--page-padding)) - 1.2vw) / 2
    );

object-fit:
    contain;


}

/* =========================================================
07 — GENERAL GALLERY IMAGES
========================================================= */

.gallery-item img {


display:
    block;

object-fit:
    contain;


}

/* =========================================================
08 — BACK TO PORTFOLIO
========================================================= */

.gallery-back-wrapper {


margin:
    0 var(--page-padding);

padding:
    0 0 45px;

display:
    flex;

justify-content:
    center;


}

.gallery-back {


display:
    inline-flex;

align-items:
    center;

gap:
    12px;

padding-bottom:
    9px;

border-bottom:
    none;

font-size:
    13px;

font-weight:
    400;

text-transform:
    uppercase;

letter-spacing:
    0.14em;

color:
    var(--text-soft);

transition:
    color 0.25s ease,
    opacity 0.25s ease;


}

.gallery-back:hover {


color:
    var(--text);

opacity:
    0.7;


}

/* =========================================================
09 — MOBILE
========================================================= */

@media (max-width: 650px) {


.gallery-header {

    padding:
        5vh var(--page-padding)
        7vh;

}


.gallery-header h1 {

    font-size:
        clamp(40px, 13vw, 70px);

}


.gallery-header p {

    margin-top:
        18px;

    font-size:
        8px;

}


/* -----------------------------------------------------
   GALLERY
   ----------------------------------------------------- */

.gallery {

    padding:
        0 var(--page-padding)
        3vw;

}


.gallery-row {

    margin-bottom:
        7vw;

}


/* -----------------------------------------------------
   MOBILE PORTRAITS
   ----------------------------------------------------- */

.gallery-row.portraits {

    display:
        block;

}


.gallery-row.portraits .gallery-item {

    width:
        100%;

    height:
        auto;

    max-width:
        none;

    margin-bottom:
        7vw;

}


.gallery-row.portraits
.gallery-item:last-child {

    margin-bottom:
        0;

}


.gallery-row.portraits .gallery-item img {

    width:
        100%;

    height:
        auto;

    max-width:
        100%;

    max-height:
        none;

    object-fit:
        contain;

}


/* -----------------------------------------------------
   MOBILE LANDSCAPE
   ----------------------------------------------------- */

.gallery-row.landscape .gallery-item {

    width:
        100%;

}


.gallery-row.landscape .gallery-item img {

    width:
        100%;

    height:
        auto;

    max-width:
        100%;

    max-height:
        none;

    object-fit:
        contain;

}


}

/* =========================================================
   LANDINGPAGE BESCHREIBUNG
========================================================= */

.gallery-header-content {

    max-width:
        850px;

}


.gallery-description {

    max-width:
        650px;

    margin-top:
        24px;

    color:
        var(--text-soft);

    font-size:
        16px;

    font-weight:
        400;

    line-height:
        1.5;

}


/* =========================================================
   LANDINGPAGE — MOBILE
========================================================= */

@media (max-width: 650px) {

    .gallery-description {

        font-size:
            14px;

        line-height:
            1.55;

    }

}