/* slider */
 .slider .mask {
     background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(black));
     background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.566));
     position: absolute;
     width: 100%;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     border-radius: 12px;
 }

 .slider img {
     width: 100%;
     border-radius: 12px;
 }

 .slider .image-caption {
     position: absolute;
     left: 15px;
     right: 15px;
     bottom: 15px;
 }

 .slider .image-caption .title-post {
     --font-size: 1.02rem;
     --max-height: 60px;
     font-size: var(--font-size);
     font-weight: 500 !important;
     color: var(--dark);
     overflow: hidden;
     text-overflow: ellipsis;
     transition: color .3s, transform .3s ease;
     margin-top: 3px !important;
     display: -webkit-box;
     -webkit-box-orient: vertical;
     -webkit-line-clamp: 3;
     max-height: var(--max-height);
     font-family: var(--ff-title);
     margin-bottom: 10px;
     color: #fff;
 }

 /* 1. Card */

 .esm-card {
     background-color: #fff !important;
     border: 1px solid #f5f5f548 !important;
     border-radius: 0px !important;
     overflow: hidden;
     position: relative;
     transition: transform .3s ease;
 }

 .esm-card .esm-card-badge {
     --badge-bg: var(--secondary);
     --badge-color: var(--dark);
     background-color: var(--badge-bg) !important;
     color: var(--badge-color) !important;
     border-radius: 0px !important;
     font-weight: 400;
 }

 
.esm-card-theme-blue *,
.esm-card-theme-blue .esm-card-badge {
    --hover-color: var(--blue);
    --badge-bg: var(--blue);
    --badge-color: var(--light);
}

.esm-card-theme-green *,
.esm-card-theme-green .esm-card-badge {
    --hover-color: var(--green);
    --badge-bg: var(--green);
    --badge-color: var(--light);
}

.esm-card-theme-purple *,
.esm-card-theme-purple .esm-card-badge {
    --hover-color: var(--purple);
    --badge-bg: var(--purple);
    --badge-color: var(--light);
}

.esm-card-theme-red *,
.esm-card-theme-red .esm-card-badge {
    --hover-color: var(--red);
    --badge-bg: var(--red);
    --badge-color: var(--light);
}

.esm-card-theme-brown *,
.esm-card-theme-brown .esm-card-badge {
    --hover-color: var(--orange);
    --badge-bg: var(--orange);
    --badge-color: var(--light);
}

.esm-card-theme-sky-blue *,
.esm-card-theme-sky-blue .esm-card-badge {
    --hover-color: var(--sky-blue);
    --badge-bg: var(--sky-blue);
    --badge-color: var(--light);
}

.esm-card-theme-dark *,
.esm-card-theme-dark .esm-card-badge {
    --hover-color: var(--secondary);
    --badge-bg: var(--dark);
    --badge-color: var(--light);
}

.esm-card-theme-teal *,
.esm-card-theme-teal .esm-card-badge {
    --hover-color: #3e9292;
    --badge-bg: #3e9292;
    --badge-color: var(--light);
}

.esm-card-theme-yellow *,
.esm-card-theme-yellow .esm-card-badge {
    --hover-color: #ae8900;
    --badge-bg: var(--yellow);
    --badge-color: var(--dark);
}

 .esm-card .esm-card-image {
     --ratio: 4 / 3;
     width: 100%;
     aspect-ratio: var(--ratio);
     overflow: hidden;
     background: transparent;
     padding: 0px;
     position: relative;
     transition: transform .3s ease;
 }

 .esm-card .esm-card-image.ratio-3-2 {
     --ratio: 3 / 2;
 }

 .esm-card .esm-card-image.ratio-16-9 {
     --ratio: 16 / 9
 }

 .esm-card.large .esm-card-image {
     --ratio: 16 / 9;
 }

 .esm-card .esm-card-image img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     display: block;
     background-color: #ffffff;
     transition: transform .3s ease;
 }

 .esm-card .esm-card-image::after {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: rgba(0, 0, 0, 0.3);
     opacity: 0;
     transition: opacity .3s ease;
 }

 .esm-card:hover .esm-card-image::after {
     opacity: 1;
 }

 .esm-card .esm-card-title {
     --font-size: 1.02rem;
     --max-height: 65px;
     font-size: var(--font-size);
     font-weight: 500 !important;
     color: var(--dark);
     overflow: hidden;
     text-overflow: ellipsis;
     transition: color .3s, transform .3s ease;
     margin-top: 3px !important;
     display: -webkit-box;
     -webkit-box-orient: vertical;
     -webkit-line-clamp: 3;
     max-height: var(--max-height);
     font-family: var(--ff-title);
 }

 .esm-card.large .esm-card-title {
     --font-size: 1.875rem;
     --max-height: auto;
 }

 .esm-card:hover .esm-card-title {
     /* color: var(--primary); */
     color: var(--hover-color) !important;
 }

 .esm-card .card-icon-view {
     position: absolute;
     left: 0;
     right: 0;
     bottom: 0;
     top: 0;
     height: 100%;
     z-index: 1;
     display: flex;
     justify-content: center;
     align-items: center;
 }

 .esm-card .card-icon-view i {
     --card-icon-height: 40px;
     --card-icon-width: 40px;

     height: var(--card-icon-height);
     width: var(--card-icon-width);
     padding: 10px;
     border-radius: 2.5em;
     border: 3px solid #ffffff2d;
     color: var(--light);
     opacity: 0;
     transition: all .3s ease;
     display: flex;
     justify-content: center;
     align-items: center;
 }

 .esm-card .card-icon-view.icon-sm i {
     --card-icon-height: 20px;
     --card-icon-width: 20px;
     font-size: 10px;
 }

 .esm-card:hover .card-icon-view i {
     background-color: var(--hover-color) !important;
     opacity: 1;
 }

 /* news */

 /* 1. images */
 .esm-article-post img {
     width: 100% !important;
     overflow: hidden;
     background-color: #f5f5f5;
     border-radius: 10px;
     padding: 5px;
 }

 .esm-article-post h2,
 .esm-article-post h2 * {
     font-size: 1.5rem !important;
     font-weight: 500;
     text-transform: inherit;
     font-family: var(--ff-title);
 }

 .esm-article-post h2::first-letter {
     text-transform: uppercase;
 }

 .esm-article-post h3,
 .esm-article-post h3 * {
     font-size: 1.2rem !important;
     font-weight: 400;
 }

 .esm-article-post p {
     font-size: 14px !important;
 }