/* Content 1 */
.c1-card {
    border: 5px solid var(--secondary);
    border-radius: 5px;
}

.c1-button-search {
    background-color: var(--accent-lighten);
    border-radius: 4px;
    color: var(--white);
}

/* HR Border */
.hr-border {
    border-top: 1px solid var(--secondary);
    opacity: .75;
}

.w-85 {
    width: 85%;
}

/* Text Discount */
.text-discount {
    opacity: .7;
}

/* Content 2 */
.c2-card {
    transition: .2s ease-in-out;
}

.c2-card-image {
    width: 100%;
    height: 37vh;
    object-fit: cover;
}

.c2-card-title {
    height: 46px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Content 4 */
.c2-button {
    background: var(--accent-lighten);
    border-radius: 5px;
    padding: 8px 24px;
    font-family: 'Source Sans Pro', sans-serif;
    font-style: normal;
    font-weight: normal;
    font-size: 1.2rem;
    color: var(--white);
}

/* Pagination */
.pagination .page-link {
    border: 0;
}

.page-item.active .page-link {
    background-color: transparent;
    color: var(--primary);
}

.pagination-icon {
    background-color: var(--primary);
    border-radius: 50% !important;
    color: var(--white);
}

.page-link {
    transition: 0.3s linear;
}

/* Aside */
aside {
    background-color: var(--white);
    border: 3px solid #7dad3f;
    border-radius: 5px;
    bottom: 20%;
    box-sizing: border-box;
    position: sticky;
    top: 115px;
    width: 255px;
    padding: 0;
    margin: 0;
}

aside .aside-header {
    padding: 24px;
    border-bottom: 3px solid #7dad3f;
}

aside .aside-body {
    padding: 24px;
}

.aside-scroll {
    height: 250px;
    overflow-y: scroll;
    width: 100%;
}

.aside-link {
    width: max-content;
}

@media (hover:hover) and (pointer:fine) {

    /* Content 3 */
    .c2-card:hover {
        filter: drop-shadow(0px 0px 15px #7DAD3F);
        -webkit-transform: translateY(-0.3333333333rem);
        transform: translateY(-0.3333333333rem);
        transition: .2s ease-in-out;
    }

    /* Content 4 */
    .c2-button:hover {
        background-color: var(--accent-main);
        color: var(--white)
    }

}

@media only screen and (max-width: 767.98px) {

    /* Content 4 */
    .c2-card-image {
        height: 25vh;
    }

    .c2-card-title {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        height: 65px;
    }

    .c2-column:nth-child(odd) {
        padding-right: 8px;
    }

    .c2-column:nth-child(even) {
        padding-left: 8px;
    }

}

@media only screen and (max-width: 997.98px) {
    .c2-card-image {
        height: 20vh;
    }
}