.archive .characters {
    padding: 0 0 120px;
}

.archive .characters .character {
    margin: 0;
    padding: 0;
}

.archive .characters .blog-item .wrap {
    height: 290px;
    overflow: hidden;
}

.archive .characters .blog-item .wrap .img,
.archive .characters .blog-item .wrap .img a,
.archive .characters .blog-item .wrap .img a img {
    height: 100%;
    object-fit: cover;
    object-position: top;
}

.archive .characters .blog-item .wrap .img a .hover-show {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 100%;
    width: 100%;
    padding: 20px;
    display: flex;
    align-items: flex-end;
    color: #fff;
    background: #37016199;
    transition: opacity ease-in-out 0.25s;
}

.archive .characters .blog-item .wrap .img a:not(:hover) .hover-show {
    opacity: 0;
}

.archive .characters .character .wrap .img a .hover-show h6 {
    font-size: 35px;
    margin: 0;
    padding: 0;
}

.archive .characters-list {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    margin-right: -30px;
    overflow-y: hidden;
}

.archive .characters-list .blog-item {
    flex-basis: calc(25% - 30px);
    max-width: calc(25% - 30px);
    padding: 0;
    margin: 0;
}

@media all and (max-width: 767px) {
    .archive .characters-list {
        flex-direction: column;
        margin-right: initial;
    }
    .archive .characters-list .blog-item {
        flex-basis: 100%;
        max-width: 100%;
    }
}

.archive .loadmore{
    border-radius: 2px;
    display: block;
    text-align: center;
    font-size: 14px;
    font-size: 0.875rem;
    font-weight: 800;
    letter-spacing:1px;
    cursor:pointer;
    text-transform: uppercase;
    padding: 10px 0;
    margin: auto;
}