.wp-block-group {
	--group-pad: var(--wp--preset--spacing--40);
	--group-pad-sm: var(--wp--preset--spacing--20);
	max-width: var(--wp--custom--container--lv-0);
	margin-inline-start: auto;
	margin-inline-end: auto;

	&__inner-container {
		width: 100%;
	}

	/* New group markup has no inner-container; pad the group like eye_01 (spacing 40). */
	&.has-background:not([style*="padding-"]):not(:has(> .wp-block-group__inner-container)) {
		&:is(.is-style-default, .is-style-index, .is-style-right-arrow),
		&:not([class*="is-style"]) {
			padding-block: var(--group-pad);
			padding-inline: var(--group-pad);

			@media (width < 768px) {
				padding-block: var(--group-pad-sm);
				padding-inline: var(--group-pad-sm);
			}
		}
	}

	&.is-style-default,
	&:not([class*="is-style"]) {
		width: 100%;

		&.has-background {
			> .wp-block-group__inner-container {
				padding-block: var(--group-pad);
				padding-inline: var(--group-pad);

				@media (width < 768px) {
					padding-block: var(--group-pad-sm);
					padding-inline: var(--group-pad-sm);
				}
			}
		}

		@media (width < 768px) {
			max-width: calc(100vw - var(--wp--preset--spacing--40));
		}
	}

	&.is-style-index {
		width: 100%;

		&.has-background {
			.wp-block-group__inner-container {
				padding-block: var(--group-pad);
				padding-inline: var(--group-pad);

				@media (width < 768px) {
					padding-block: var(--group-pad-sm);
					padding-inline: var(--group-pad-sm);
				}
			}
		}

		.wp-block-columns.is-style-default {
			margin-block-start: var(--wp--preset--spacing--40);

			h3.is-style-simple {
				+ ul.is-style-pink-dot {
					margin-block-start: var(--wp--preset--spacing--20);
				}
			}
		}

		@media (width < 768px) {
			max-width: calc(100vw - var(--wp--preset--spacing--40));
		}
	}

	&.is-style-fee {
		width: 100%;
		max-width: var(--wp--custom--container--lv-0);
		margin-inline-start: auto;
		margin-inline-end: auto;
		border-radius: 10px;

		@media (width < 768px) {
			max-width: calc(100vw - var(--wp--preset--spacing--40));
		}
	}

	&.is-style-introduction {
		width: 100%;
		background-image: url(../../../images/frontpage_background_flower.jpg);
		background-position: center;
		background-size: cover;
		background-attachment: fixed;

		@media (width < 768px) {
			max-width: calc(100vw - var(--wp--preset--spacing--40));
		}
	}

	&.is-style-flow {
		counter-reset: num;
	}

	&.is-style-contact {
		width: 100%;
		max-width: var(--wp--custom--container--lv-1);
		padding-block-start: 4%;
		padding-block-end: 4%;
		padding-inline-start: 4%;
		padding-inline-end: 4%;
		background-color: var(--wp--preset--color--white);
		background-image: url(https://primo-clinic.com/wp/wp-content/uploads/2020/06/nurse-pic.png);
		background-repeat: no-repeat;
		background-position: right bottom;
		border: #ccc 3px solid;

		> .wp-block-group__inner-container {
			width: 70%;
			margin-inline-end: auto;

			> * + * {
				margin-block-start: 0;
			}

			@media (width < 768px) {
				width: 100%;
			}
		}

		&:not(:has(> .wp-block-group__inner-container)) {
			> * {
				width: 70%;
				margin-inline-end: auto;
			}

			> * + * {
				margin-block-start: 0;
			}

			@media (width < 768px) {
				> * {
					width: 100%;
				}
			}
		}

		> p:first-child,
		 > .wp-block-group__inner-container > p:first-child {
			font-size: var(--wp--preset--font-size--medium-large);

			@media (width < 768px) {
				width: 50%;
				font-size: var(--wp--preset--font-size--normal);
			}
		}

		.wp-block-buttons {
			display: flex;
			flex-flow: row nowrap;
			justify-content: stretch;
			gap: var(--wp--preset--spacing--20);
			max-width: none;
			margin-block-start: var(--wp--preset--spacing--20);
			margin-inline-start: 0;
			margin-inline-end: auto;

			@media (width < 768px) {
				flex-flow: row nowrap;
				max-width: none;
			}
		}

		.wp-block-button {
			flex: 1;
			max-width: none;

			.wp-block-button__link {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 100%;
				padding-block-start: 15px;
				padding-block-end: 15px;
				padding-inline-start: 0;
				padding-inline-end: 0;
				color: var(--wp--preset--color--light-01);
				font-size: var(--wp--preset--font-size--medium-large);
				line-height: 1;
				text-align: center;
				text-decoration: none;
				border-radius: var(--wp--preset--border-radius--small);

				.ion {
					margin-inline-end: var(--wp--preset--spacing--20);
					font-size: var(--wp--preset--font-size--huge);
				}

				@media (width < 768px) {
					font-size: var(--wp--preset--font-size--normal);
				}
			}

			&:first-child .wp-block-button__link {
				background-color: var(--wp--preset--color--skyblue);
				box-shadow: 0 3px 0 0 #0071bc;
			}

			&:nth-child(2) {
				margin-block-start: 0;

				.wp-block-button__link {
					background-color: #f15d82;
					box-shadow: 0 3px 0 0 #d4145a;
				}
			}

			@media (width < 768px) {
				max-width: none;
			}
		}

		.wp-block-buttons ~ p {
			max-width: none;
			margin-block-start: 0;
			font-size: var(--wp--preset--font-size--large);
		}

		.wp-block-buttons + p {
			margin-block-start: var(--wp--preset--spacing--20);
		}

		@media (width < 768px) {
			background-position: right top;
			background-size: 50%;
		}
	}

	&.is-style-feature-box {
		padding-block-start: 40px;
		padding-block-end: 40px;
		padding-inline-start: 40px;
		padding-inline-end: 40px;
		border: 15px solid color-mix(in srgb, var(--wp--preset--color--secondary) 80%, white);
	}

	&.is-style-pagetop-link {
		.wp-block-buttons {
			display: flex;
			flex-flow: row;
			gap: var(--wp--preset--spacing--20);

			.wp-block-button__link {
				line-height: 1;
			}

			@media (width < 768px) {
				flex-wrap: wrap;
			}
		}

		.wp-block-button {
			a {
				padding-block-start: var(--wp--preset--spacing--20);
				padding-block-end: var(--wp--preset--spacing--20);
				padding-inline-start: 0;
				padding-inline-end: 0;
				background-color: var(--color-white);
			}
		}
	}

	&.is-style-right-arrow {
		position: relative;
		width: 100%;

		&.has-background {
			> .wp-block-group__inner-container {
				padding-block: var(--group-pad);
				padding-inline: var(--group-pad);

				@media (width < 768px) {
					padding-block: var(--group-pad-sm);
					padding-inline: var(--group-pad-sm);
				}
			}
		}

		&::after {
			position: absolute;
			inset-block-start: 50%;
			inset-inline-start: 100%;
			z-index: 10;
			width: 0;
			height: 0;
			border-color: transparent transparent transparent var(--wp--preset--color--secondary);
			border-style: solid;
			border-width: 50px 0 50px 35px;
			transform: translateY(-50%);
			content: "";

			@media (width < 768px) {
				inset-block-start: 100%;
				inset-inline-end: 0;
				inset-inline-start: 0;
				margin-inline-start: auto;
				margin-inline-end: auto;
				border-color: var(--wp--preset--color--secondary) transparent transparent transparent;
				border-width: 20px 40px 0 40px;
				transform: initial;
			}
		}
	}

	& + .wp-block-group {
		margin-block-start: 0;
	}
}