/*
handler: ndmais-home-mais-acessadas
deps: bootstrap-5,bootstrap-icons
version: 1.0.4
*/

#mais-acessadas {
	margin-bottom: 30px;
	counter-reset: mais-acessada;
}

#mais-acessadas .title h2 {
	font-size: 28px;
	font-weight: 700;
	color: var(--blue);
    line-height: 1;
    margin-bottom: 20px;
}

#mais-acessadas article {
	margin-bottom: 15px;
}

#mais-acessadas article:last-of-type{
    margin-bottom: 0;
}

#mais-acessadas .link-thumb {
	overflow: hidden;
	border-radius: 8px;
	width: 45%;
	display: block;
}

#mais-acessadas .link-thumb:before {
	counter-increment: mais-acessada;
	content: counter(mais-acessada);
	display: block;
	position: absolute;
	z-index: 10;
	top: 0;
	left: 0;
	font-size: 15px;
	font-weight: 700;
	color: var(--bs-white);
	width: 34px;
	height: 34px;
	border-radius: 0 0 34px 0;
	line-height: 32px;
	padding-left: 8px;
}

#mais-acessadas article:nth-child(2) .link-thumb:before {
	background: #2fbbf8;
}

#mais-acessadas article:nth-child(3) .link-thumb:before {
	background: #479cf7;
}

#mais-acessadas article:nth-child(4) .link-thumb:before {
	background: #5f7ff6;
}

#mais-acessadas article:nth-child(5) .link-thumb:before {
	background: #7465f6;
}

#mais-acessadas article:nth-child(6) .link-thumb:before {
	background: #8f44f7;
}

#mais-acessadas img {
	border-radius: 8px;
}

#mais-acessadas article .text {
    width: 55%;
    padding-left: 15px;
}

#mais-acessadas article .categoria {
	font-size: 12px;
	font-weight: 500;
	color: var(--purple);
	line-height: 1;
    display: block;
    margin-bottom: 5px;
}

#mais-acessadas article h3 {
	font-size: 14px;
    line-height: 1.3;
	font-weight: 500;
	color: var(--black);
}

#mais-acessadas article h3 a {
	color: var(--black);
}

#mais-acessadas article h3 a:hover {
	color: var(--blue-dark);
}


@media only screen and (min-width : 992px) {

	#mais-acessadas {
		margin-bottom: 0;
	}

    #mais-acessadas .title h2 {
		font-size: 40px;
	}

    #mais-acessadas article {
        margin-bottom: 20px;
    }

    #mais-acessadas .link-thumb {
        width: 40%;
    }

    #mais-acessadas .link-thumb:before {
		font-size: 22px;
		width: 45px;
		height: 45px;
		border-radius: 0 0 45px 0;
		line-height: 41px;
		padding-left: 12px;
	}

    #mais-acessadas article .text {
        width: 60%;
        padding-left: 20px;
    }

    #mais-acessadas article h3 {
        font-size: 16px;
        line-height: 1.5;
    }

}

@media only screen and (min-width : 1200px) {

     #mais-acessadas .link-thumb {
        width: 35%;
    }

    
    #mais-acessadas article .text {
        width: 65%;
    }

}