$image-dim: 192px;

.home {

display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-start;
color: $p_text;
.page-summary {
    flex: 0;
    width: 100%;
    text-align: center;
}
h1 {
    flex: 0;
    margin: auto;
    display: flex;
    align-items: center;
}
a {
    &:hover {
        text-decoration: underline $primary;
    }
}
.category {
    &_wrapper {
        margin-top: 2em;
        flex: 1;
        width: 100%;
        display: flex;
        @include mobile {
            flex-direction: column;
            margin-top: 1em;
        }
    }
    &_container {
        display: flex;
        flex-direction: column;
        flex: 0 50%;
        height: 100%;
        justify-content: flex-start;
        align-items: center;
        box-sizing: border-box;
        transition: .5s ease;
        padding-left: 2em;
        padding-right: 2em;
        @include mobile {
            padding-left: 0;
            padding-right: 0;
            padding-top: 2em;
        }
        &:first-of-type {
            border-right: 1px solid $base-white;
            @include mobile {
                padding-bottom: 2em;
                padding-top: 0;
                border-right: none;
                border-bottom: 1px solid $base-white;
            }
        }
    }
    &_image {
        justify-content: center !important;
        display: flex;
        height: $image-dim * 1.4;
        align-items: center;
        @include mobile {
            height: $image-dim * 1.1;
        }
        a {
            display: block;
            width: $image-dim;
            height: $image-dim;
            border-radius: 50%;
            border: 2px solid $p_light;
            overflow: hidden;
            transition: .5s ease;
            &:hover {
                height: $image-dim * 1.2;
                width: $image-dim * 1.2;
            }
        }
        img {
            height: $image-dim;
            width: $image-dim;
            object-fit: cover;
            transition: .5s ease;
            opacity: 0.85;
            &:hover {
                height: $image-dim * 1.2;
                width: $image-dim * 1.2;
            }
        }
    }
    &_description {
        text-align: center;

    }
    display: flex;
    flex: 0 100%;
    opacity: 0.7;
    height: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    backface-visibility: hidden;
    @include mobile {
        opacity: 0.25;
    }
}

.avatar_container {
    margin-right: 0.5em;
}

}