@layer base;

.container1 {
	display: grid;
	grid-template: 1fr / 1fr 1fr 1fr;
	gap: 5%;
	transition: grid-template 300ms 150ms;
	
}



.item:hover .caption {
	opacity: 100;
	transition: opacity 100ms 300ms;
}

.item:hover svg {
	transition: transform 200ms ease-out 300ms;
	transform: translate3d(0, 0, 0);
}


.section {
		
		display: center;
		place-items: center;
		
}


.item img {
		width: 400px;
		display: block;
		position: absolute;
		height: 90%;
		object-fit: inherit;
		
		mix-blend-mode: multiply;
	}
h3 {
		margin: 0;
		color: #fff;
	}

	.container1 {
		display: ruby-base-container;
		grid-template: 1fr / 1fr 1fr 1fr;
		gap: 5%;
		aspect-ratio: 16 / 9;
		max-width: 800px;
		width: 100%;
		transition: grid-template 300ms 120ms;
		padding: 1rem;

	}

	.item {
		position: relative;
	}
		
	.item:nth-child(2n) {
		
		
	}

	.item:nth-child(3n) {
		
		
	}
	

	
	.caption {
		position: center;
		z-index: 1;
		color: #fff;
		padding: 1rem;
		opacity: 100;
		transition: opacity 120ms;
		display: flex;
		flex-direction: column;
		height: 100%;
		font-size: large;
		font-weight: 800;
		text-align: center;
		padding-top: 10px;
		background: rgba(0,0,0,0.6);
		
	}
	
	svg {
		color: #fff;
		margin-top: auto;
		align-self: center;
		fill: currentColor;
		width: 2em;
		height: auto;
		transform: translate3d(-1em, 0, 0);
	}

@media (max-width: 767px) {

	.caption {
		position: center;
		z-index: 1;
		color: #fff;
		padding: 1rem;
		opacity: 100;
		transition: opacity 120ms;
		display: flex;
		flex-direction: column;
		height: 20%;
		font-size: small;
		font-weight: 100;
		text-align: center;
		padding-top: 5px;
		background: rgba(0, 0, 0, 0.6);

	}

		.container1 {
			display: ruby-base-container;
			grid-template: 1fr / 1fr 1fr 1fr;
			gap: 1rem;
			aspect-ratio: 19.5 / 9;
			max-width: 767px;
			width: 100%;
			transition: grid-template 300ms 120ms;
			padding: 1rem;
		}

	.item img {
		width: 400px;
		display: flexbox;
		position: absolute;
		height: 110%;
		object-fit: inherit;
		
		mix-blend-mode: multiply;
	}

				h3 {
					margin: -5;
					color: #fff;
					font-size: small;
					letter-spacing: 0.1%;
					font-family: Arial, Helvetica, sans-serif;
				}

				svg {
					color: #fff;
					margin-top: auto;
					align-self: center;
					fill: currentColor;
					width: 1em;
					height: 10px;
					transform: translate3d(-1em, 0, 0);
				}
}