/* The portrait and colours echo the site's existing book and author panels. */
.instagram-follow {
	display: grid;
	grid-template-columns: 138px minmax(0, 1fr) auto;
	align-items: center;
	gap: 32px;
	margin: 38px 0;
	padding: 28px 32px;
	border: 1px solid #31aeff;
	border-top-width: 4px;
	background: linear-gradient(105deg, #000b19 30%, #00224f);
	text-align: left;
}

.instagram-follow__portrait img {
	display: block;
	width: 138px;
	height: 154px;
	border: 5px solid #fff;
	object-fit: cover;
	object-position: center top;
}

.instagram-follow h2 {
	margin: 0 0 16px;
	color: #fff;
	font-size: 26px;
	font-weight: 700;
	line-height: 1.35;
}

.instagram-follow__description {
	max-width: 450px;
	margin: 0;
	color: #fff;
	font-family: 'Lato', sans-serif;
	font-size: 17px;
	font-weight: 400;
	line-height: 1.55;
	text-shadow: none;
}

.instagram-follow__button {
	display: inline-block;
	padding: 14px 22px;
	border: 2px solid #31aeff;
	background: #31aeff;
	color: #000b19;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.4;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
}

.instagram-follow__button:hover,
.instagram-follow__button:focus {
	border-color: #fff;
	background: #fff;
	color: #000b19;
	text-decoration: none;
}

.instagram-follow__button:focus-visible,
.social-links > a.social-links--instagram:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 4px;
}

/* Font Awesome supplies both marks; keep their boxes and spacing consistent. */
.social-links > a.social-links--facebook,
.social-links > a.social-links--instagram {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 62px;
	margin-right: 12px;
	padding: 0;
	vertical-align: middle;
}

/* Both Font Awesome squares have built-in vertical space in their viewBox. */
.social-links > a.social-links--facebook svg,
.social-links > a.social-links--instagram svg {
	transform: scale(1.142857);
	transform-origin: center;
}

.social-links > a.social-links--facebook:hover,
.social-links > a.social-links--facebook:focus {
	color: #9bb8f0;
}

.social-links > a.social-links--facebook:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 4px;
}

.social-links > a.social-links--instagram {
	color: #44cdff;
}

.social-links > a.social-links--instagram:hover,
.social-links > a.social-links--instagram:focus {
	color: #fff;
}

@media (max-width: 991px) {
	.instagram-follow {
		grid-template-columns: 112px minmax(0, 1fr);
		gap: 20px;
	}

	.instagram-follow__portrait img {
		width: 112px;
		height: 130px;
	}

	.instagram-follow__action {
		grid-column: 2;
	}
}

@media (max-width: 575px) {
	.instagram-follow {
		grid-template-columns: 84px minmax(0, 1fr);
		gap: 16px;
		margin: 28px 0;
		padding: 20px;
	}

	.instagram-follow__portrait img {
		width: 84px;
		height: 96px;
		border-width: 3px;
	}

	.instagram-follow h2 {
		margin-bottom: 8px;
		font-size: 20px;
	}

	.instagram-follow__description {
		font-size: 15px;
	}

	.instagram-follow__action {
		grid-column: 1 / -1;
	}

	.instagram-follow__button {
		width: 100%;
	}
}