section.content {
    h2 {
        text-align: center;
        font-family: var(--title-font);
    }

    p {
        margin: 3rem;
        text-align: center;
    }
}

section.content:nth-of-type(2n) {
    background-color: #e3f0f1;
}

.index_container {
    width: 100%;
    height: 100svh;
}

.oceanarrow_img {
    position: absolute;
    width: calc(48% - 2vw);
    height: 53%;
    right: 0;
    top: 0;
    border-radius: 0 5rem 0 0rem;
    filter: grayscale(60%) contrast(70%);
    z-index: 30;
}

.trackandfield_img {
    width: calc(48% - 2vw);
    height: 53%;
    position: absolute;
    left: 0;
    bottom: 0;
    border-radius: 0 0rem 0 5rem;
    z-index: 20;
    filter: grayscale(60%) contrast(70%);
}

.vscode_img {
    width: 52%;
    height: calc(47% - 2vw);
    position: absolute;
    right: 0;
    bottom: 0;
    filter: grayscale(60%) contrast(70%);
    z-index: 25;
}

.drums_img {
    width: 52%;
    height: calc(47% - 2vw);
    position: absolute;
    left: 0;
    top: 0;
    filter: grayscale(60%) contrast(70%);
    z-index: 15;
}

.header_container {
    /* background-color: #9fe1e6; */
    position: absolute;
    width: 70%;
    height: 70svh;
    left: 15%;
    top: 15svh;
    border-radius: 0 5rem 0 5rem;
}

.header_container img {
    object-fit: cover;
}

.h1_container {
    font-family: var(--title-font);
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 50;
    border-radius: 0 3rem 0 3rem;
    background-color: var(--white);
    padding: .6em;
    font-size: max(3.5vw, 3.5rem);

    h1 {
        margin: 0;
        color: #3f3f3f;
        letter-spacing: .2rem;
        font-size: inherit;
    }
}

.works {
    margin: 3rem 0;
    .work {
        position: relative;
        width: 100%;
        /* box-shadow: .1rem .2rem .5rem #bbbbbb; */
        display: flex;
        column-gap: 1.5rem;
        margin: 3rem 0;

        .thumbnail {
            position: relative;
            overflow: hidden;
            flex-basis: 12rem;
            width: 12rem;
            height: 9rem;
            flex-shrink: 0;
            cursor: pointer;
            transition: transform 0.3s ease;
        }

        .thumbnail img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

        .thumbnail::after {
            content: "";
            position: absolute;
            inset: 0;
            background: white;
            opacity: 0;
            transition: opacity 0.3s;
        }

        .thumbnail:hover {
            transform: scale(1.05);
        }

        .thumbnail:hover::after {
            opacity: 0.2;
        }

        .title {
            padding: 1rem 0 .3rem;
            font-size: 1.2em;
            width: max-content;
        }

        .title::after {
            content: "";
            display: block;
            width: calc(100% + 1rem);
            height: .4rem;
            clip-path: polygon(0 0, 100% 0%, calc(100% - .5rem) 100%, 0% 100%);
            background-color: #bbbbbb;
            margin: .3rem 0;
        }

        .overview {
            color: #3f3f3f;
            padding: .5rem 0;
        }
    }

}

.blogposts {
    margin: 3rem 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 2rem;

    .blogpost {
        text-decoration: none;
        color: var(--black);
    }

    .blogpost-wrapper {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 12rem;
        flex-shrink: 0;
        padding: 1rem;
        cursor: pointer;

        .thumbnail {
            position: relative;
            overflow: hidden;
            width: 9rem;
            height: 9em;
            flex-shrink: 0;
        }

        .thumbnail::after {
            content: "";
            position: absolute;
            inset: 0;
            background: white;
            opacity: 0;
            transition: opacity 0.3s;
        }

        .thumbnail img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

        .text {
            width: 100%;
            text-align: center;

            .title {
                margin: 1rem 0;
                line-height: 1.25rem;
                height: 2.5rem;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                line-clamp: 2;
                -webkit-box-orient: vertical;

                overflow: hidden;
            }

            .published_at {
                color: #5a5a5a;
            }
        }
    }

    .blogpost {
        transition: box-shadow 0.5s ease, transform 0.5s ease;
    }

    .thumbnail {
        transition: transform 0.5s ease;
    }

    .blogpost:hover .thumbnail {
        transform: scale(1.05);
    }

    .blogpost:hover .thumbnail::after {
        opacity: 0.15;
    }

    .blogpost:hover {
        box-shadow: .3rem .3rem .4rem #bebebe;
        transform: translate(-.2rem, -.2rem);
    }
}