.cta-block {
	display: block;
	position: relative;
	margin: 2rem 0 1.2rem;

	& .panel {
		display: flex;
		position: relative;
		flex-direction: column;
		gap: 0.4rem;
		justify-content: center;
		align-items: center;
		padding: 0.2rem 0;
		min-height: 3.6rem;

		&::before {
			content: "";
			display: block;
			position: absolute;
			transition: transform var(--dur-medium) var(--ease);
			transform: scale(1.25);
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-color: var(--black);
		}

		&.active::before {
			transform: scale(1);
		}

		& .title-frame {
			position: relative;
			width: 100%;
			max-width: 13rem;
			width: fit-content;
			padding: 0.1rem 0.83rem;
			display: flex;
			flex-direction: column;
			align-items: center;

			&.padding-small {
				padding: 0.1rem 0.4rem;
			}


			& i {
				display: block;
				position: absolute;
				width: 0.03rem;
				height: 0.03rem;
				background-color: var(--orange);
			}

			& i:nth-child(1) {
				top: 0;
				left: 0;
			}

			& i:nth-child(2) {
				top: 0;
				right: 0;
			}

			& i:nth-child(3) {
				bottom: 0;
				right: 0;
			}

			& i:nth-child(4) {
				bottom: 0;
				left: 0;
			}
		}

		& .title {
			color: #ffffff;
			text-align: center;
		}

		& .text {
			color: #ffffff;
			max-width: 4.89rem;
			margin-top: 0.3rem;
			text-align: center;
		}

		& .button {
			position: relative;
			z-index: 1;
		}
	}

	@media screen and (max-width: 768px) and (orientation: portrait) {
		margin: 0.8rem 0;

		& .panel {
			min-height: 2.52rem;
			gap: 0.2rem;
			padding: 0.24rem;

			& .title-frame {
				max-width: 100%;
				padding: 0;

				&.padding-small {
					padding: 0;
				}
			}

			& .button {
				width: 100%;
			}

			& .title-frame i {
				display: none;
			}
			
			& .text {
				margin-top: 0.2rem;
			}
	
			& .button {
				margin-top: 0.1rem;
			}
		}
	}
}