#techs {
	color: var(--color-light);
	display: flex;
	flex-direction: column;
	gap: 16px;

	& h2 {
		color: var(--color-blue);
		font-size: clamp(1.5em, 3vw, 64px);
		margin: 0;
	}

	article {
		background-color: var(--color-blue);
		border-radius: 16px;
		box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
		display: flex;
		justify-content: space-around;
		align-items: center;
		padding: 8px;

		& * {
			display: flex;
			justify-content: center;
			align-items: center;
			gap: 16px;
		}

		& h3 {
			font-size: min(3vw, 64px);
			margin: 0;
		}
	}

	& img {
		width: 32px;
		transition: transform 0.3s;

		&:hover {
			transform: scale(1.125);
		}
	}
}


/* Media Queries */

@media (min-width: 425px) {
	#techs {
		& img {
			width: 48px;
		}
	}
}

@media (min-width: 768px) {
	#techs {
		display: grid;
		grid-template: repeat(3, 120px) / repeat(3, 1fr);
		gap: 2vw;

		& h2 {
			display: flex;
			justify-content: center;
			align-items: center;
			grid-column: 2 / 3;
			grid-row: 2 / 3;
		}

		& article:nth-of-type(1) {
			grid-column: 1 / 3;
			grid-row: 1 / 2;
		}
	
		& article:nth-of-type(2) {
			flex-direction: column;
			grid-column: 3 / 4;
			grid-row: 1 / 3;
		}
	
		& article:nth-of-type(3) {
			grid-column: 2 / 4;
			grid-row: 3 / 4;
		}
	
		& article:nth-of-type(4) {
			flex-direction: column;
			grid-column: 1 / 2;
			grid-row: 2 / 4;
		}
	}
}

@media (min-width: 1440px) {
	#techs {
		& img {
			width: 64px;
		}
	}
}