.newReadMore {
	counter-reset: block-most-read-counter;

	h2 {
		color: var(--clr-cnn);
		font-size: 18px;
		font-weight: 700;
		line-height: 32px;
		padding: 0;

		/* Aqui é o quadrado depois do título */
		&::after {
			content: "";
			width: 8px;
			height: 8px;
			background-color: var(--clr-cnn);
			display: inline-block;
			margin-left: 8px;
		}
	}

	ul {
		padding: 0;
		margin: 0;
		list-style: none;
	}
}

.newReadMore__item {
	a {
		gap: 16px;
		display: grid;
		font-size: 14px;
		font-weight: 500;
		line-height: 20px;
		position: relative;
		align-items: center;
		color: var(--clr-cnn-grey-5);
		justify-content: space-between;
		grid-template-columns: 101px 1fr;

		&:hover {
			color: var(--clr-cnn);
		}

		picture {
			display: block;
			position: relative;
			
			/* Aqui é o contador dos mais lidos */
			&::after {
				top: 0;
				left: 0;
				color: #fff;
				width: 19px;
				height: 19px;
				display: flex;
				font-size: 14px;
				position: absolute;
				align-items: center;
				justify-content: center;
				background-color: var(--clr-cnn);
				counter-increment: block-most-read-counter;
				content: counter(block-most-read-counter);
			}
		}

	}

	img {
		width: 100%;
		height: 82px;
		object-fit: cover;
		border-radius: 4px;
	}

	/* Aplica os estilos para o item que vem após outro */
	&+ .newReadMore__item {
		margin-top: 16px;
		padding-top: 16px;
		border-top: 1px solid var(--clr-cnn-grey-1);
	}

	/* Aplica os estilos para o primeiro item */
	&:first-of-type {
		display: block;

		a {
			gap: 0;
			grid-template-columns: 1fr;

			&::after {
				width: 32px;
				height: 32px;
				font-size: 16px;
			}
		}

		img {
			width: 100%;
			height: 176px;
			object-fit: cover;
			margin-bottom: 8px;
			border-radius: 4px;
		}
	}
}

@media (max-width: 991px) {
	.newReadMore__item {
		a {
			font-size: 16px;
			grid-template-columns: 152px 1fr;
		}

		img {
			height: 134px;
		}

		&:first-of-type {
			img {
				height: 240px;
			}
		}
	}
}