/*Container for Profile Picture & Name*/
.user {
    display: flex;
    flex-direction: column;
}

.MainFeedPostImages {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.postPadding {
    padding: 0em 15em 0em 15em;
}

.user-profile {
    border: 1px black solid;
    display: flex;
    flex-direction: row;
    width: 100%;
}
/*Text Under Profile Picture*/
.profile-header-user-details {
    border: 1px black solid;
    overflow-wrap: break-word;
    text-align: center;
}

.profile-displayname {
    font-size: 1.2em;
}

.avatar {
    width: 100%; /* let Bootstrap scale it */
    max-width: 64px; /* don’t let it get bigger than this */
    min-width: 40px; /* don’t let it get smaller than this */
    height: auto; /* keep natural aspect ratio */
    object-fit: cover; /* makes square crops look good */
}

.profile-picture-container {
    border: 1px black solid;
}
.profile-picture {
    width: 25em;
    height: 20em;
    margin: auto;
}

.carousel-inner {
    height: 0;
    padding-bottom: 35%; /* this sets carousel aspect ratio (4:1 here) */
}

.carousel-item {
    position: absolute !important; /* Bootstrap is insistent */
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.carousel-item img {
    height: 100%; /* Bootstrap handles width already */
    object-fit: contain; /* or 'contain' if you want stretch instead of crop */
}