.c-social-share {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: auto;
	gap: var(--spacing-sm);

	@media (width < 768px) {
		grid-template-columns: 1fr;
	}

	.c-social-share__button {
		display: inline-flex;
		align-items: center;
		text-decoration: none;
		color: var(--color-white);
		transition: opacity 0.3s;

		&:hover,
		&:focus {
			color: var(--color-white);
			opacity: 0.75;
		}

		/* Brand colours */
		&.c-social-share__button--email {
			background-color: #666666;
		}

		&.c-social-share__button--facebook {
			background-color: #1877F2;
		}

		&.c-social-share__button--messenger {
			background-color: #0084FF;
		}

		&.c-social-share__button--pinterest {
			background-color: #E60023;
		}

		&.c-social-share__button--x-twitter {
			background-color: #000000;
		}

		&.c-social-share__button--whatsapp {
			background-color: #25D366;
		}

		.c-social-share__icon {
			padding: calc(var(--spacing-xs) / 2);

			&.c-social-share__icon--email {
				background-color: #5b5b5b;
			}

			&.c-social-share__icon--facebook {
				background-color: #156bd9;
			}

			&.c-social-share__icon--messenger {
				background-color: #0076e5;
			}

			&.c-social-share__icon--pinterest {
				background-color: #cf001f;
			}

			&.c-social-share__icon--whatsapp {
				background-color: #21bd5b;
			}

			svg {
				width: 20px;
				height: 20px;
			}
		}

		.c-social-share__text {
			padding: calc(var(--spacing-xs) / 2);
		}
	}
}