/* 
NOTICE: 
This CSS file contains customized styles for certain pages. Some components could be used in multiple pages.
Please add comment to each component so we can find what component does this style belong to, 
as we will merge CSS files together and remove unnecessary lines or duplicated lines.
When coping with responsive design, please follow the breakpoint in this file.
This file must be loaded after bootstrap.min.css.
*/

/* Desktop Style */
/*-- custom-articles component --*/
.large {
    font-size: 120%;
}
.lh-150 {
    display: inline-block;
    line-height: 1.5;
}
.custom-articles .article-card .card-body {
    background-color: var(--color-background-beige);
    padding: 1.125rem 1rem;
}
.custom-articles .article-card .card-body .label-name {
    font-size: 15px;
    background-color: #FFFFFF;
    text-align: center;
    padding: 3px 0;
    border-radius: 16px;
}
.custom-articles .article-card .card-body .label-supplement {
    position: relative;
    font-size: 15px;
    font-weight: 500;
    text-align: center;
    margin: 10px 0;
}
.custom-articles .article-card .card-body .label-supplement span {
    position: relative;
    background-color: var(--color-background-beige);
    padding: 0 8px;
}
.custom-articles .article-card .card-body .label-supplement::before {
    content: "";
    position: absolute;
    width: 100%;
    border-bottom: 1px dashed var(--color-main);
    top: 11px;
    left: 0;
}
.custom-articles .article-card .card-body .card-title {
    font-size: clamp(15px, calc(0.8333vw + 6px), 18px);
    -webkit-line-clamp: 6;
    line-height: 1.56;
    min-height: 112px;
}
.custom-articles .article-card .card-body .card-text {
    font-size: 13px;
    line-height: 30px;
    margin-bottom: 0;
    -webkit-box-orient: initial;
    -webkit-line-clamp: none;
}
/*--End of custom-articles --*/

/* Responsive: Mobile view 390px~768px */
@media (max-width: 767.98px) {
    /*-- custom-articles component --*/
    .custom-articles .col {
        margin-top: 20px;
    }
    .custom-articles .article-card .card-body .card-title {
        -webkit-line-clamp: none;
        min-height: auto;
        margin-bottom: 30px;
        font-size: 18px;
    }
    /*--End of custom-articles --*/
}
/*--END of mobile responsive--*/

/* Responsive: Tablet view 769px~1080px */
@media (min-width: 768px) and (max-width: 1079.98px) {
    /*-- custom-articles component --*/
    .custom-articles .article-card .card-body .card-title {
        font-size: clamp(1rem, calc(0.625rem + 0.625vw), 1.125rem);
    }
    /*-- end of custom-articles component --*/
}
/*--END of table responsive--*/

/* Responsive: Desktop view 1440px~1920px only if necessary */
@media (min-width: 1440px) and (max-width: 1919.98px) {
}
/*--END of desktop responsive--*/

/* Responsive: Extra Large Desktop view > 1920px */
@media (min-width: 1920px) {
}
/*--END of extra large desktop responsive--*/