main {
	align-items: center;
	width: 1200px;
	max-width: 100%;
}

a {
	text-decoration: none;
}

h1 {
	font-weight: 700;
	font-size: 32px;
	line-height: 41px;
	/* identical to box height */

	/* Gradients/pinkish */

	background: linear-gradient(184.15deg, #ffffff 30.23%, #884ea4 96.61%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	padding: 40px 0;
	width: 100%;
	text-align: left;
	text-fill-color: transparent;
}

.builder_card {
	display: flex;

	flex-direction: column;

	justify-content: flex-start;
	align-items: center;
	padding: 14px 16px;
	gap: 12px;

	width: 378px;
	height: 382px;
	max-width: 100%;
	background: linear-gradient(180deg, #292556 0%, #1e1530 100%);
	/* Solid/Borders */

	border: 1px solid #362d69;
	box-shadow: 0px 4px 24px rgba(57, 47, 113, 0.2);
	border-radius: 24px;
	transition: all 0.3s;
}

.builder_card:hover {
	box-shadow: 0px 6px 24px rgba(107, 99, 157, 0.2);
}

.card_header {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	width: 100%;
}

.builder_card img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	border-radius: 16px;
}

.card_title {
	font-weight: 500;
	font-size: 16px;
	line-height: 120%;
	/* or 19px */

	color: #ffffff;
}

.info {
	padding: 5px 16px;
	height: 31px;

	/* Solid/Borders */

	background: #362d69;
	/* Solid/Borders */

	border: 1px solid #362d69;
	border-radius: 8px;
	font-weight: 400;
	font-size: 13px;
	line-height: 160%;
	/* identical to box height, or 21px */

	text-align: center;

	/* Solid/Text Primary */

	color: #d0bed8;

	text-shadow: 0px 2px 16px rgba(159, 108, 209, 0.32);
	display: grid;
	place-items: center;
}

@media (min-width: 0) {
	.builders_container {
		display: grid;
		width: 100%;
		max-width: 100%;
		grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
		align-items: center;
		justify-items: center;
		gap: 18px;
	}
	.builder_card {
		max-width: 290px;
	}
}

@media (min-width: 320px) {
	.builders_container {
		display: grid;
		width: 100%;
		max-width: 100%;
		grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
		align-items: center;
		justify-items: center;
		gap: 18px;
	}
	.builder_card {
		max-width: 300px;
	}
}

@media (min-width: 360px) {
	.builders_container {
		display: grid;
		width: 100%;
		max-width: 100%;
		grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
		align-items: center;
		justify-items: center;
		gap: 18px;
	}
	.builder_card {
		max-width: 340px;
	}
}

@media (min-width: 400px) {
	.builders_container {
		grid-template-columns: repeat(auto-fill, minmax(378px, 1fr));
	}
	.builder_card {
		max-width: 378px;
	}
}