.MSBOA_Events_Default{
    --AccentColor: #ff811a;
    --DesLines: 3;

    --PictureWidth: 525;
    --PictureHeight: 335;

    --Item0: 1;
    --Item1: 1;
    --Item2: 2;
    --Item3: 2;
    --Item4: 2;
    --Item5: 2;
    --RowGap0: 50px;
    --RowGap1: 50px;
    --RowGap2: 50px;
    --RowGap3: 50px;
    --RowGap4: 50px;
    --RowGap5: 50px;
    --ColumnGap0: 40px;
    --ColumnGap1: 40px;
    --ColumnGap2: 40px;
    --ColumnGap3: 40px;
    --ColumnGap4: 40px;
    --ColumnGap5: 40px;

    --DateSize: clamp(75px, 1.25vw + 66px ,90px);
}
.MSBOA_Events_Default{
    --Item: var(--Item0);
    --RowGap: var(--RowGap0);
    --ColumnGap: var(--ColumnGap0);
}
@media (min-width: 575px) {
    .MSBOA_Events_Default{
        --Item: var(--Item1);
        --RowGap: var(--RowGap1);
        --ColumnGap: var(--ColumnGap1);
    }
}
@media (min-width: 768px) {
    .MSBOA_Events_Default{
        --Item: var(--Item2);
        --RowGap: var(--RowGap2);
        --ColumnGap: var(--ColumnGap2);
    }
}
@media (min-width: 992px) {
    .MSBOA_Events_Default{
        --Item: var(--Item3);
        --RowGap: var(--RowGap3);
        --ColumnGap: var(--ColumnGap3);
    }
}
@media (min-width: 1200px) {
    .MSBOA_Events_Default{
        --Item: var(--Item4);
        --RowGap: var(--RowGap4);
        --ColumnGap: var(--ColumnGap4);
    }
}
@media (min-width: 1400px) {
    .MSBOA_Events_Default{
        --Item: var(--Item5);
        --RowGap: var(--RowGap5);
        --ColumnGap: var(--ColumnGap5);
    }
}
.MSBOA_Events_Default{
    display: flex;
    flex-wrap: wrap;
    row-gap: var(--RowGap);
    column-gap: var(--ColumnGap);
}
.MSBOA_Events_Default .item{
    position: relative;
    width: calc( ( 100% - var(--ColumnGap) * ( var(--Item) - 1 ) ) / var(--Item) );
}
.MSBOA_Events_Default .svg-icon{
    fill: currentColor;
    width: 1em;
    height: 1em;
    vertical-align: middle;
}

/* Custom */
.MSBOA_Events_Default .item{
    display: flex;
    flex-direction: column;
    background-color: #ffffff;
    box-shadow:0px 0px 8px rgba(0, 0, 0, .1);
}
.MSBOA_Events_Default .item .pic{
    position: relative;
    display: flex;
    width: 100%;
    aspect-ratio: var(--PictureWidth) / var(--PictureHeight);
}
.MSBOA_Events_Default .item .pic img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.MSBOA_Events_Default .item .pic .date{
    position: absolute;
    bottom: 30px;
    right: 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 10px;
    width: var(--DateSize);
    height: var(--DateSize);
    color: #ffffff;
    text-align: center;
    background-color: var(--AccentColor);
}
.MSBOA_Events_Default .item .pic:has( + .content) .date{
    bottom: calc( -1 * var(--DateSize) / 2 );
}
.MSBOA_Events_Default .item .pic .date .day{
    font-size: clamp(28px, 1vw + 20.8px ,40px);
    font-weight: 700;
    line-height: 1.1;
}
.MSBOA_Events_Default .item .pic .date .month{
    font-size: 18px;
    font-weight: 400;
    line-height: 1.1;
}
.MSBOA_Events_Default .item .content{
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    padding: 15px 30px 20px;
}
.MSBOA_Events_Default .item .content::after{
    content: '';
    display: block;
    width: 100%;
    flex-grow: 1;
    order: 1;
}
.MSBOA_Events_Default .item .pic:has(.date) + .content {
    padding-top: calc( 15px + var(--DateSize) / 2 );
}
.MSBOA_Events_Default .item .content .title{
    margin: 0 0 0;
    font-size: clamp(22px, 0.5vw + 18.4px ,28px);
    font-weight: 500;
    line-height: calc( 34 / 28 );
}
.MSBOA_Events_Default .item .content .info{
    margin: 15px 0 0;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.75;
}
.MSBOA_Events_Default .item .content .info .info1{
    color: var(--AccentColor);
}
.MSBOA_Events_Default .item .content .info .sep{
    padding: 0 5px 0;
}
.MSBOA_Events_Default .item .content .description{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--DesLines);
    overflow: hidden;

    margin: 15px 0 0;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.75;
}
.MSBOA_Events_Default .item .content .link{
    order: 2;
    margin-top: 35px;
    padding-top: 20px;
    border-top: 1px solid #e4e4ea;
}
.MSBOA_Events_Default .item .content .link a{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    color: var(--default-color, #717178);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.75;
}
.MSBOA_Events_Default .item .content .link a:hover{
    color: var(--AccentColor);
}
.MSBOA_Events_Default .item .content .link a .svg-icon{
    color: var(--AccentColor);
    font-size: 20px;
}