@import "app.css";
@import "form.css";
@import "button.css";
@import "alert.css";

main {
	display: flex;
	height: 100vh;
	width: 1320px;
	margin: auto;
}

main>section {
	flex: 1 1 auto;
	width: 50%
}

main>section.form-wrapper {
	display: flex;
	align-items: center;
	justify-content: center;
}

main>section.form-wrapper>.content>header {
	display: flex;
	gap: 16px;
	margin-bottom: 16px;
	padding: 16px;
	border-radius: 12px;
	border: 2px solid #d1f5f4;
	background-color: white;
}

main>section.form-wrapper>.content>header>.logo {
	display: flex;
	align-items: center;
	justify-content: center;
}

main>section.form-wrapper>.content>header>.logo>img {
	width: 36px;
}

main>section.form-wrapper>.content>header>.content {
	font-weight: bold;
}

main>section.hero {
	display: flex;
	align-items: center;
	justify-content: center;
}

section.hero>img {
	width: 512px;
}

.pt-social-media-wrapper {
	border: 2px solid #d1f5f4;
	background-color: white;
	border-radius: 20px;
	padding: 24px;
	width: 425px;
}

.pt-social-media-wrapper .title {
	font-weight: bold;
	text-align: center;
	font-size: 16px;
	margin-bottom: 1.5rem;
}

.pt-social-media-list {
	list-style: none;
	padding: 0;
}

.pt-social-media-list:not(.pt-social-media-grid) li {
	margin-bottom: .5rem;
}

.pt-social-media-list li a {
	display: flex;
	align-content: center;
	justify-content: center;
	gap: 12px;
}

.pt-social-media-list svg {
	width: 1.25rem;
}

.pt-social-media-grid {
	display: grid;
	grid-template-columns: repeat(12, [col-start] 1fr);
	grid-gap: 1rem;
}

.pt-social-media-grid li {
	order: 0;
	grid-column-start: span 6;
}

@media (max-width: 1400px) {
	main {
		width: 1320px;
	}
}

@media (max-width: 1200px) {
	main {
		width: 1140px;
	}

	main>section.hero {
		display: none;
	}
}

@media (max-width: 992px) {
	main {
		width: 960px;
	}
}

@media (max-width: 768px) {
	main {
		width: 720px;
	}
}

@media (max-width: 576px) {
	main {
		width: 100%;
	}
}