.supt-blog-list {
	#block-verisure-gv-content .container-fluid {
		padding: 0;
	}
}
.block-views-blockblog-blog-list {
	padding-top: 0 !important;
	background-color: $color-grey-background;

	> div {
		/* Replicate bootstrap container */
		padding-left: var(--supt-container-padding-inline);
		padding-right: var(--supt-container-padding-inline);
		max-width: $grid-container-max-width !important;

		width: 100%;
		margin-right: auto;
		margin-left: auto;
		@media (min-width: $breakpoint-sm) {
			max-width: 540px;
		}
		@media (min-width: $breakpoint-md) {
			max-width: 720px;
		}
		@media (min-width: $breakpoint-lg) {
			max-width: 960px;
		}
		@media (min-width: $breakpoint-xl) {
			max-width: 1140px;
		}
	}

	.botones-isotope {
		display: none;
	}

	.item-list {
		display: flex;
		flex-direction: column;
		gap: $spacing-8;

		@media (min-width: $breakpoint-md) {
			gap: $spacing-12;
		}

		.blog {
			display: grid;
			grid-template-columns: repeat(12, 1fr);
			gap: $spacing-6;
			height: auto !important;

			@media (min-width: $breakpoint-md) {
				gap: $spacing-12 $spacing-4;
			}

			.blog-item {
				/* reset */
				display: block !important;
				left: initial !important;
				top: initial !important;
				margin: 0;
				box-shadow: none;
				border: none;
				border-radius: 0;
				padding: 0;
				transition: none;
				overflow: hidden;
				height: auto;
				background: initial;
				/* *********** */

				position: relative !important;
				grid-column: span 12;

				@media (min-width: $breakpoint-md) {
					&:nth-child(n + 2) {
						grid-column: span 6;
					}
				}
				@media (min-width: $breakpoint-lg) {
					&:nth-child(n + 2) {
						grid-column: span 4;
					}
				}

				.field-content {
					@mixin clamp gap, $spacing-4, $spacing-6, $breakpoint-xs, $breakpoint-xl;
					display: flex;
					flex-direction: column;

					.taxonomy {
						display: none;
					}

					.image {
						overflow: hidden;
						height: initial;
						width: 100%;
						margin: 0;
						border-radius: 0;

						img {
							aspect-ratio: 4 / 3;
							width: 100%;
							height: 100%;
							transition: transform $transition-mid ease-in-out;
						}
					}

					.view-blog-text {
						@mixin clamp gap, $spacing-4, $spacing-6, $breakpoint-xs, $breakpoint-xl;
						width: 100%;
						display: flex;
						flex-direction: column;
						padding: 0;
					}

					.views-field {
						width: 100%;
					}

					.title {
						a {
							@extend %t-h4;
							margin-bottom: 0;
							outline: none;
							transition: color $transition-fast;
							position: static;
							cursor: pointer;

							&::before {
								content: '';
								display: block;
								position: absolute;
								inset: 0;
								background-color: transparent;
								z-index: 1;
							}
						}
					}

					.date-block {
						margin: 0;
						display: flex;
						align-items: baseline;
						gap: $spacing-1-5;
						color: $color-grey-5;
						text-transform: capitalize;
						opacity: 1;

						&::before {
							@extend %t-body-xs;
							content: 'News';
							display: inline-flex;
							align-items: center;
							padding: 3px $spacing-1-5 2px;
							border-radius: 4px;
							border: 1px solid $color-grey-2;
							background: transparent;
							position: relative;
							backdrop-filter: blur(16px);
							white-space: nowrap;
							letter-spacing: 0;

							@media (min-width: $breakpoint-md) {
								padding-inline: 7px;
							}
						}

						time {
							@extend %t-body-xs;
						}
					}
				}

				&:first-child {
					@extend %gradiant-corpo;
					@mixin clamp margin-bottom, $spacing-8, $spacing-12, $breakpoint-xs, $breakpoint-xl;

					width: auto;
					margin-inline: calc(var(--supt-container-padding-inline) * -1);
					@media (min-width: $grid-container-max-mq) {
						margin-inline: calc(
							-1 *
								(((100vw - $grid-container-max-width) / 2) + var(--supt-container-padding-inline))
						);
					}

					.field-content {
						@media (min-width: $breakpoint-md) {
							flex-flow: row nowrap;
							justify-content: space-between;
						}

						.image {
							@media (min-width: $breakpoint-md) {
								order: 2;
								width: 50%;
							}

							img {
								@media (min-width: $breakpoint-md) {
									aspect-ratio: 2/1;
								}
							}
						}

						.view-blog-text {
							padding: $spacing-10 0 $spacing-12 var(--supt-container-padding-inline);

							@media (min-width: $breakpoint-md) {
								width: calc(5 / 12 * 100%);
							}
						}

						.title {
							a {
								@extend %t-h2;
								color: $color-white;
							}
						}
						.date-block,
						time {
							color: $color-white;
						}
						.date-block::before {
							border-color: $color-white;
						}
					}
				}

				&:hover,
				&:focus-within {
					.field-content {
						.image {
							img {
								transform: scale(1.05);
							}
						}
					}
				}
			}
		}

		.isotope-pager {
			display: none;
		}
	}

	.view-display-id-blog_list {
		margin-bottom: 0;
		padding-bottom: $spacing-16;
	}

	.view-display-id-blog_list .title a,
	.view-security-portal .title a,
	.view-magazine.view-display-id-magazine_list .title a {
		color: $color-black;
	}
}