@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');

* {
    font-family: 'Inter', sans-serif;
}

html,
body,
#main-flex,
section {
    height: 100%;
}

#main-flex {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
    justify-content: space-between;
}

section.inactive {
    display: none;
}

p {
    font-size: 20px;
    line-height: 1.75em;
}

.item {
    h3 {
        font-size: 1.3em;
        text-align: left;
        padding: 0 0.8em 0 0.8em;
    }

    h5 {
        text-align: left;
        font-size: 0.8em;
        padding: 0 1.3em 0 1.3em;
        color: #666;
    }

    p {
        padding-left: 5px;
        padding-right: 5px;
        font-size: 1em;
        margin-top: 8px;
    }

    header {
        padding: 1.2vh 0 1.2vh 0;
    }
}

.col-4,
.col-12-mobile {
    font-size: 0.7em;
}

header > p {
    margin-left: 5px;
    margin-right: 5px;
}

#art > .container > h3 {
    margin: 30px 0 20px 0;
}

.grid-container {
    display: grid;
    /* grid-template-columns: repeat(auto-fit, minmax(13vw, 1fr)); */
    /* grid-auto-rows: 10vw; */
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 0.5vw;
    grid-auto-flow: dense;

    img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        overflow: hidden;
    }
}

.horizontal {
    grid-row: span 2;
    grid-column: span 2;
}

.vertical {
    grid-row: span 2;
    grid-column: span 1;
}

.photo-table {
    border-collapse: collapse;
    width: 100%;
}

#photo-portfolio-grid-all > h3 {
    padding: 0 0 0.6em 0;
}

.photo-portfolio-grid {
    max-width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 1vw;
    align-items: start;

    img {
        max-width: 100%;
    }

    a, header {
        transition: opacity 0.35s ease-in-out;
        cursor: pointer;
    }

    a:hover,
    header:hover + a {
        opacity: 0.5;
    }

    article {
        margin: 0;
    }

    .item {
        display: flex;
        flex-direction: column-reverse;

        &:hover {
            h3, h5 {
                transition: color 0.35s ease-in-out;
                color: #E27689;
            }
        }
    }
}

.photo-album-grid {
    img {
        transition: opacity 0.35s ease-in-out;

        &:hover {
            opacity: 0.5;
        }
    }
}

.container > p {
    margin-bottom: 1.5em;
}

.photo-album-back {
    text-align: left;
    font-size: 18px;
    margin-bottom: 10px;

    span {
        cursor: pointer;
        padding: 5px;
    }
}

.bx-link {
    padding-left: 3px;
    font-size: 70%;
}

.header-no-desc {
    padding-bottom: 20px;
}

.lazyload,
.lazyloading {
	opacity: 0;
}

.lazyloaded {
	opacity: 1;
	transition: opacity 500ms;
}

.horizontal a,
.vertical a {
    border-bottom: none;
}

#headerToggleInside {
    transition: opacity 0.3s ease;
}