/* blog */

#blogs-section .blogs-wrapper {
    width: 100%;
    aspect-ratio: 1/1.3;
    background-image: linear-gradient(to top, rgba(0, 0, 0, 0.61), rgba(0, 0, 0, 0.25)), var(--image-url);
    background-repeat: no-repeat;
    background-size: 300%;
    background-position: center;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.11);
    position: relative;
    transition: 1s;
}

#blogs-section .blogs-wrapper {
    content: attr();
}

#blogs-section .blogs-wrapper:hover {
    background-size: 500%;
    transition: 10s;
}

#blogs-section .blogs-wrapper .view-now {
    border: 1px solid white;
    color: white;
    transition: 0.3s;
}

#blogs-section .blogs-wrapper .view-now:hover {
    background-color: var(--clr-primary);
}

.blog-box .content {
    position: relative;
}

.blog-box .content::before {
    content: attr(data-views);
    content: none !important;
    display: none;
    bottom: 100%;
    right: 0;
    padding-right: 2.5rem;
    padding-left: 1rem;
    background-image: url(https://api.iconify.design/uil:eye.svg?color=%23ffffff);
    background-position: center right 0.5rem;
    background-size: contain;
    background-repeat: no-repeat;
    color: white;
    border-radius: 1rem 0 0 0;
    background-color: var(--clr-secondary);
}