.title {
    margin: 0;
    margin-bottom: 10px;
    width: 100%;
}
.blog{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    background-color: white;
    max-height: 400px;
}

.blog-content{
    padding: 50px !important;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
}

.blog-content-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    border-left: 5px solid var(--mid-colour);
    padding: 15px 0;
    padding-left: 5%;
    height: 100%;
    width: 100%;
}

.blog-content-container .title{
    font-weight: bolder;
}

.blog-body p {
    overflow: hidden !important;
    -o-text-overflow: ellipsis;
       text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 5; /* number of lines to show */
    -webkit-box-orient: vertical;
    font-size: 1rem;
    line-height: 1.6rem;
    margin-top: 0;
    overflow-wrap: anywhere;
}


.blog-image{
    -o-object-fit: cover;
       object-fit: cover;
    padding-right: 0 !important;
}

.cards-container{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    padding-bottom: 20px;
}

.event-card{
    background-color: white;
    border-radius: 4px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: calc(33.33% - 20px);
    margin: 10px;
    -ms-flex-preferred-size: auto;
        flex-basis: auto;
}

.event-card .event-time{
    padding: 20px;
    border-radius: 4px 0 0 4px;
    white-space: nowrap;
    min-width: 140px;
}

.event-card .event-description{
    padding: 20px;
    width: calc(100% - 140px);
}

.event-description .title{
    font-weight: bolder;
}

.event-description .event-organization{
    color: var(--link-colour);
    font-weight: bolder;
}

.event-time .time{
    font-weight: bolder;
    font-size: 1.2rem;
}

.event-time .intermediate{
    color: var(--mid-grey);
}

.event-time .time-container{
    width: 100%;
}

#recent-events{
    padding: 2%;
}

.announcement-card {
    border-left: solid 8px;
    padding: 20px;
    margin: 10px;
    width: calc(33.33% - 20px);
    -ms-flex-preferred-size: auto;
        flex-basis: auto;
}

.announcement-card .title{
    font-weight: bolder;
}

.announcement-card .announcement-organization{
    font-weight: bolder;
    color: var(--link-colour);
}
.announcement-description p {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    font-size: 1rem;
    line-height: 1.6rem;
    margin-top: 0;
    overflow-wrap: anywhere;
}
hr {
    margin: 10px 0;
    border: 0px solid var(--light-grey);
    border-top-width: 2px;
}
.authors {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    margin: 10px 0 15px;
    color: var(--line-grey);
}
.authors-image {
    height: 24px;
    margin-right: 5px;
}
.authors-text {
    font-size: 1rem;
    overflow: hidden;
    text-overflow: ellipsis;
}
.circle {
    -o-object-fit: cover;
       object-fit: cover;
    height: 24px;
    width: 24px;
    -webkit-box-shadow: 0 2px 2px 0 rgb(0 0 0 / 14%), 0 3px 1px -2px rgb(0 0 0 / 12%), 0 1px 5px 0 rgb(0 0 0 / 20%);
            box-shadow: 0 2px 2px 0 rgb(0 0 0 / 14%), 0 3px 1px -2px rgb(0 0 0 / 12%), 0 1px 5px 0 rgb(0 0 0 / 20%);
}
.authors a {
    color: var(--link-colour);
    font-weight: bold;
}

.authors-text-string {
    color: var(--near-black);
    font-weight: bold;
}

#recent-announcements{
    padding: 2%;
}

.banner {
    height: 500px;
}

@media screen and (max-width: 992px) {
    .event-card {
        width: calc(50% - 20px);
    }
    .announcement-card {
        width: calc(50% - 20px);
    }
}

@media screen and (max-width: 600px){
    .cards-container{
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
    }
    #main-container {
        padding-bottom: 20px;
    }
    .title {
        font-size: 1.4rem;
    }
    .blog-content {
        padding: 20px !important;
        width: 100% !important;
    }
    .blog {
        -webkit-box-orient: vertical;
        -webkit-box-direction: reverse;
            -ms-flex-direction: column-reverse;
                flex-direction: column-reverse;
        max-height: -webkit-fit-content;
        max-height: -moz-fit-content;
        max-height: fit-content;
    }
    .blog-image {
        display: block !important;
        width: 100% !important;
        padding: 0 !important;
    }
    .blog-body p {
        font-size: 0.9rem;
        line-height: 1.4rem;
    }
    .event-card {
        width: calc(100% - 20px);
    }
    .event-time span {
        font-size: 0.9rem;
    }
    .event-time .time{
        font-size: 1rem;
    }
    .announcement-card {
        width: calc(100% - 20px);
    }
    .announcement-description p {
        font-size: 0.9rem;
        line-height: 1.4rem;
    }
}