.noticias-grid__item {
	position: relative;
	height: 100%;
}

.noticias-grid__image {
	max-width: 100%;
}

.noticias-grid__cover-link {
	position: absolute;
	top: 0;
  left: 0;
  width: 100%;
	height: 100%;
	text-decoration: none;
	transition: background-color 0.2s ease-out;
	opacity: 0.1;
	background-color: transparent;
}

/* How to do link inside link https://stackoverflow.com/a/46707009/4086981 */
.noticias-grid__cover-link:hover {
	text-decoration: none;
	background-color: #000;
}

.noticias-grid__content {
	position: absolute;
  top: 0;
  left: 0;
  width: 100%;
	height: 100%;
	
	pointer-events: none;
}

.noticias-grid__content a {
	pointer-events: all;
}

.noticias-grid__inner {
	display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  height: 100%;
  padding: 0.5rem 1rem;
  /* will be "on top", if browser supports it */
  background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.800));
  /* background-image: linear-gradient(#ff0000, #ff0000); */
  color: white;
}

.noticias-grid__category {
	color: #000;
  border-radius: 3rem;
  background-color: #cdff64;
  text-transform: uppercase;
  font-size: .9rem;
  text-align: center;
	padding: 0.25rem 1rem .15rem 1rem;
	margin-bottom: 0.5rem;
	/* prevent font boosting on mobile devices */
  min-height: 1px;
	max-height: 99999px;
}

.noticias-grid__category--theme-fonts {
	font-family: Montserrat, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	font-weight: 700;
}

.noticias-grid__category:hover {
	background-color: #9fff6b;
	text-decoration: none;
	color: #000;
}

.noticias-grid__title {
	font-size: 1rem;
	color: #fff;
	/* prevent font boosting on mobile devices */
  min-height: 1px;
  max-height: 99999px;
}

.noticias-grid__title--theme-fonts {
	font-family: Montserrat, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	font-weight: 400;
}

.noticias-grid__title:hover {
	color: #fff;
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
	.noticias-grid {
		/* Parent Height doesn't follow their float children */
    /* https://stackoverflow.com/questions/16493456/parent-height-doesnt-follow-their-float-children */
    overflow: hidden;
    /* <--- here */
    display: flex;
	}

	.noticias-grid__item--multirow {
		height: 50%;
    overflow: hidden;
	}

	.noticias-grid__item--multirow:nth-child(1) {
		margin-bottom: 4px;
	}

	/* Create four equal columns that sits next to each other */
	.noticias-grid__column-left {
		float: left;
    overflow: hidden;
    width: 41.66%;
		padding-right: 4px;
		max-height: 255px;
	}

	.noticias-grid__column-center {
		float: left;
    overflow: hidden;
		width: 25%;
		max-height: 255px;
	}

	.noticias-grid__column-right {
		float: left;
    overflow: hidden;
    width: 33.33%;
		padding-left: 4px;
		max-height: 255px;
	}

	.noticias-grid__image {
		display: block;
		width: 100%;
    height: 100%;
    object-fit: cover;
	}
}

/* The maximum value is reduced by 0.02px to work around the limitations of
`min-` and `max-` prefixes and viewports with fractional widths.
See https://www.w3.org/TR/mediaqueries-4/#mq-min-max
Substract 0.02px rather than 0.01px to work around a current rounding bug in Safari.
See https://bugs.webkit.org/show_bug.cgi?id=178261
*/
@media (max-width: 991.98px) {
	.noticias-grid__image {
		margin-top: 4px;
    vertical-align: middle;
    /* make images responsive */
    width: 100%;
    height: auto;
    object-fit: cover;
	}
}

/* Small devices (landscape phones, less than 768px) */
@media (max-width: 767.98px) {
	.noticias-grid {
		padding-left: 0.5rem;
    padding-right: 0.5rem;
	}
}

/* This is a custom breakpoint */
@media (max-width: 314.98px) {
	/* To ensure the height is dynamically changed based on
	text. */
	.noticias-grid__item {
		overflow: hidden;
	}

	.noticias-grid__image {
		position: absolute;
		left: 0;
		top: 0;
		/* To override height on @media (max-width: 991.98px) */
    height: 100% !important;
	}

	.noticias-grid__content {
		position: relative;
	}

	.noticias-grid__inner {
		padding: 4rem 1rem 0.5rem 1rem;
	}
}

@media (min-width: 992px) and (max-width: 1199.98px) {
	.noticias-grid__title {
		font-size: 0.8rem;
	}

	.noticias-grid__category {
		font-size: 0.65rem;
	}
}

@media (min-width: 576px) and (max-width: 991.98px) {
	.noticias-grid__title {
		font-size: 1.65rem;
	}

	.noticias-grid__category {
		font-size: 1.15rem;
	}
}