.content-container {
    margin: auto;

    @include extra-small-screen {
        width: 90%;
    }

    @include small-screen {
        width: $screen-width-small;
    }

    @include medium-screen {
        width: $screen-width-medium;
    }

    @include large-screen {
        width: $screen-width-large;
    }
}

.flexbox-column {
    display: flex;
    flex-direction: column;
}

#site-title {
    font-size: 24px;
    font-weight: bold;
    white-space: nowrap;
}

#home-page {
    $large-screen-second-column-width: 45%;
    $mobile-column-height: calc(90vh - #{$header-height});

    display: flex;
    flex-direction: column;
    justify-content: center;

    @include large-screen {
        flex-direction: row;
        height: calc(100vh - #{$header-height});
    }

    #first-column {
        display: flex;
        justify-content: center;
        overflow: hidden;
        height: $mobile-column-height;

        @include large-screen {
            width: calc(100% - #{$large-screen-second-column-width});
            height: 100%;
        }

        img {
            object-fit: fill;
        }
    }

    #second-column {
        background-color: $primary-color;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: $mobile-column-height;

        @include large-screen {
            width: $large-screen-second-column-width;
            height: 100%;
        }

        #content-box {
            text-align: center;

            @include large-screen {
                text-align: right;
                padding-right: 18%;
            }

            #home-title {
                font-size: 16vw;

                @include small-screen {
                    font-size: 12vw;
                }

                @include medium-screen {
                    font-size: 10vw;
                }

                @include large-screen {
                    font-size: 8vw;
                }
            }

            p {
                font-size: $biggest-font-size;

                @include extra-small-screen {
                    padding: 0 2%;
                }

                @include small-screen {
                    padding: 0;
                }
            }
        }

    }
}

#blog-page {
    min-height: calc(100vh - #{$header-height});

    .post {
        display: flex;
        gap: 10px;
        height: 104px;
        padding: 10px;

        .img-container {
            flex: 1;
            overflow: hidden;
            
            img {
                height: 100%;
                object-fit: cover;
            }
        }

        .post-content {
            flex: 7;
            width: 100%;

            .post-title {
                font-size: $big-font-size;
                font-weight: bold;
                padding-bottom: 16px;
            }

            .post-blurb {
                $line-height: 1.2em;
                $num-lines: 3;

                color: $tertiary-color;
                overflow: hidden;
                max-height: calc(#{$line-height} * #{$num-lines});
                line-height: $line-height;
            }

        }
    }
}

#post-page {
    min-height: calc(100vh - #{$header-height});
    display: flex;
    flex-direction: column;
    align-items: center;

    & > * {
        padding: 8px 0;
        width: 100%;
        line-height: 1.4em;
    }

    & > *:not(#post-title-img) {
        max-width: $content-max-width;
    }

    #post-title-img {
        height: 300px;
        width: 100%;
        object-fit: cover;
    }

    p img {
        width: 100%;
    }
}