.contactLayout {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.contactPrimary {
    position: relative;
    overflow: hidden;
	display: grid;
	align-items: center;
	text-align: left;
    background: radial-gradient(circle at 100% 100%, rgba(110, 56, 224, 0.5), transparent 70%), var(--bg-1);
    gap: 6px;
	border: var(--border-3);
	border-radius: var(--radius-2);
	padding: 25px;
    justify-items: center;
	box-shadow: var(--shadow-1);
}

.contactPrimary > * {
    position: relative;
    z-index: 1;
}

.contactPrimary h3,
.contactPrimary p,
.contactCard h3,
.contactCard p,
.socialsCard h2 {
	margin: 0;
}

.contactPrimary p {
	font-weight: bold;
	color: var(--text-3);
}

.btnPrimary {
    margin-top: 6px;
}

.contactPrimary::before {
    background-color: var(--purple);
    mask-image: url(assets/icons/friends.svg);
    -webkit-mask-image: url(assets/icons/friends.svg);
}

.contactPrimary::before {
    content: "";
    position: absolute;
    right: 3%;
    width: 160px;
    height: 160px;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    z-index: 0;
    pointer-events: none;
    opacity: 0.3;
}

.socialsCard {
    text-align: center;
}

.socialsGrid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 20px;
}

.socialsGrid .btn {
	box-shadow: var(--shadow-1);
}

.contactGrid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
}

.contactCard {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 6px;
	background: var(--bg-1);
	border: var(--border-3);
	border-radius: var(--radius-2);
	padding: 25px;
	box-shadow: var(--shadow-1);
    align-items: center;
	text-align: center;
}

.contactCard h3,
.contactPrimary h3,
.socialsCard h2 {
	font-size: clamp(1.5rem, 5vw, 2.5rem);
    text-align: center;
}

.contactCard p {
	font-weight: bold;
	color: var(--text-3);
}

.contactCard .btn {
    margin-top: 6px;
}

.mailLink {
	font-weight: bold;
	color: var(--text-4);
    text-align: center;
}

.contactBtnRow {
	display: flex;
	gap: 13px;
	justify-content: center;
}

@media screen and (max-width: 759px) {
	.socialsGrid {
		grid-template-columns: repeat(4, 1fr);
	}
	.contactGrid {
		grid-template-columns: repeat(1, 1fr);
	}
}

@media screen and (max-width: 449px) {
	.socialsGrid {
		grid-template-columns: repeat(2, 1fr);
	}
}