/* main layout */

h1 {
    margin-bottom: 1rem;
}
h2.title {
    font-size: 1.5rem;
    margin-bottom: 0.3rem;
    font-weight: 700;
    text-wrap: balance;
}
section.piece {
    display: none;
}
section.piece-active {
    margin-bottom: 4rem;
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    grid-gap: 1.5rem;
    position: relative;
}
section.piece::before, section.piece::after {
    content: "";
    width: 100%;
    height: 0.1rem;
    position: absolute;
    background: var(--teal-3);
}
section.piece::before {
    top: calc(-2rem - 0.5px);
}
section.piece::after {
    bottom: calc(-2rem - 0.5px);
}
.piece div {
    font-size: 1rem;
}
div.date-class {
    font-style: italic;
}
p.description {
    margin-block: 1.5rem;
    text-wrap: pretty;
}
@media (max-width: 800px) {
    section.piece-active {
        display: flex;
        flex-direction: column-reverse;
        align-items: center;
    }
}


/* filter nav */

nav#portfolio-nav {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 4rem;
}
nav#portfolio-nav button {
    background: var(--gray-2);
    color: var(--gray-6);
}
nav#portfolio-nav button:hover, nav#portfolio-nav button:focus-visible {
    background: var(--gray-1);
}
nav#portfolio-nav button:hover, nav#portfolio-nav button:focus-visible, nav#portfolio-nav button.cat-active {
    text-decoration: underline;
}
nav#portfolio-nav button.cat-active {
    font-weight: 700;
    background: var(--teal-2);
}


/* media styling */

.media {
    justify-self: right;
}
.image .image a, .image img {
    display: block;
    width: 100%;
}
.media-container {
    width: 100%;
    display: grid;
    gap: 1rem;
    justify-items: center;
}
.video iframe {
    display: block;
    width: 100%;
    aspect-ratio: 16/9;
    border: none;
}
.video {
    width: 100%;
    background: #000000;
}
@media (max-width: 800px) {
    .media {
        justify-self: center;
    }
}
@media (hover: hover) {
    .image {
        transition: 0.2s transform ease-in;
    }
    .image:hover {
        transform: scale(103%);
        transition: 0.5s transform ease-out;
    }
    .video iframe {
        transition: 0.2s box-shadow ease-in;
    }
    .video iframe:hover {
        box-shadow: 0 0 0.7rem 0.5rem var(--gray-6);
        transition: 0.5s box-shadow ease-out;
    }
}


/* grid layouts */
.media-container {
    grid-template-columns: 1fr;
}

@media (min-width: 500px) {
    #container-diary {
        grid-template-areas: "a a"
                             "b c";
        grid-template-columns: 1fr 1fr;
    }
    #container-oboe, #container-patchwork, #container-retro-variable {
        grid-template-areas: "a b"
                             "a c";
        grid-template-columns: 1.07fr 1fr;
    }
    #container-whs {
        grid-template-areas: "a a a a a a"
                             "b b c c d d"
                             "e e e f f f"
                             "g g g h h h";
        grid-template-columns: 2.1fr 1fr 0.45fr 1.55fr 1fr 1fr;
    }
    #container-scge {
        grid-template-areas: "a a b b"
                             "c c c d";
        grid-template-columns: 1fr 1fr 0.58fr 1.42fr;
    }
    #container-didot {
        grid-template-areas: "a b"
                             "a c";
        grid-template-columns: 1.07fr 1fr;
    }
    #container-retro-static {
        grid-template-areas: "b a"
                             "b c";
        grid-template-columns: 2.08fr 1fr;
    }
    #container-psa {
        grid-template-areas: "a a"
                             "b c"
                             "b d";
        grid-template-columns: 1.43fr 1fr;
    }
    #container-ai-cards {
        grid-template-areas: "a a a"
                             "b c d";
        grid-template-columns: 1.77fr 1fr 1fr;
    }
    #container-hero {
        grid-template-areas: "a b"
                             "a c"
                             "d d"
                             "e e"
                             "f f"
                             "g g";
        grid-template-columns: 1.59fr 1fr;
        grid-template-rows: repeat(5, max-content);
    }
    #container-diary .media:nth-child(1), #container-oboe .media:nth-child(1), #container-patchwork .media:nth-child(1), #container-retro-variable .media:nth-child(1), #container-whs .media:nth-child(1), #container-scge .media:nth-child(1), #container-didot .media:nth-child(1), #container-retro-static .media:nth-child(1), #container-psa .media:nth-child(1), #container-ai-cards .media:nth-child(1), #container-hero .media:nth-child(1) {
        grid-area: a;
    }
    #container-diary .media:nth-child(2), #container-oboe .media:nth-child(2), #container-patchwork .media:nth-child(2), #container-retro-variable .media:nth-child(2), #container-whs .media:nth-child(2), #container-scge .media:nth-child(2), #container-didot .media:nth-child(2), #container-retro-static .media:nth-child(2), #container-psa .media:nth-child(2), #container-ai-cards .media:nth-child(2), #container-hero .media:nth-child(2) {
        grid-area: b;
    }
    #container-diary .media:nth-child(3), #container-oboe .media:nth-child(3), #container-patchwork .media:nth-child(3), #container-retro-variable .media:nth-child(3), #container-whs .media:nth-child(3), #container-scge .media:nth-child(3), #container-didot .media:nth-child(3), #container-retro-static .media:nth-child(3), #container-psa .media:nth-child(3), #container-ai-cards .media:nth-child(3), #container-hero .media:nth-child(3) {
        grid-area: c;
    }
    #container-whs .media:nth-child(4), #container-scge .media:nth-child(4), #container-psa .media:nth-child(4), #container-ai-cards .media:nth-child(4), #container-hero .media:nth-child(4) {
        grid-area: d;
    }
    #container-whs .media:nth-child(5), #container-hero .media:nth-child(5) {
        grid-area: e;
    }
    #container-whs .media:nth-child(6), #container-hero .media:nth-child(6) {
        grid-area: f;
    }
    #container-whs .media:nth-child(7), #container-hero .media:nth-child(7) {
        grid-area: g;
    }
    #container-whs .media:nth-child(8) {
        grid-area: h;
    }
}
/* @media (max-width: 500px) {
    .media-container {
        grid-template-columns: 1fr;
    }
    #container-psa, #container-whs {
        max-width: 100%;
        grid-template-columns: 1fr;
    }
    #container-ai-cards, #container-psa, #container-scge {
        grid-template-areas: "a"
                             "b"
                             "c"
                             "d";
    }
    #container-retro-static, #container-didot {
        grid-template-areas: "a"
                             "b"
                             "c";
    }
    #container-whs {
        grid-template-areas: "a"
                             "b"
                             "c"
                             "d"
                             "e"
                             "f"
                             "g"
                             "h";
    }
} */