.mira_hero_a1-layout {
    --button-border-color-2: #ffffff;
    --button-text-color-2: #ffffff;

    position: relative;
    color: #ffffff;
    overflow: hidden;
    min-height: calc(100vh - var(--pk-header-height));
    display: flex;
    flex-direction: column;
    justify-content: center;
    isolation: isolate;
}

.mira_hero_a1-layout .hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
}

.mira_hero_a1-layout::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
	background: linear-gradient(75deg, rgba(1, 35, 80, 0.30) -5.82%, rgba(1, 35, 80, 0.00) 100%);
}
.mira_hero_a1-layout .pk-col {
    padding-block: calc(7 * var(--su));
}

.mira_hero_a1-layout .pk-col > * {
    position: relative;
    z-index: 1;
}

.mira_hero_a1-layout .pk-heading {
    color: inherit;
}

.mira_hero_a1-layout .pk-button-group .pk-button:nth-child(2),
.mira_hero_a1-layout .pk-button-group .pk-button:nth-child(2):hover {
	--button-border-color-2: #ffffff;
    --button-border-color-2-hover: #ffffff;
    --button-text-color-2: #ffffff;
    --button-text-color-2-hover: #ffffff;
	--button-border-color-2: transparent;
	--button-border-color-2-hover: transparent;
	padding-inline: 0;
}

.pk-page .mira_hero_a1-layout .pk-button-group .pk-button:nth-child(2),
.mira_hero_a1-layout .pk-button-group .pk-button:nth-child(2):hover {
	--button-icon-color-2: var(--deep-pine-100);
	--button-icon-color-2-hover: var(--deep-pine-100);
	--button-icon-bg-2: #ffffff;
}

.mira_hero_a1-layout .pk-text {
	font-size: var(--desktop-body-xl);
}
.mira_hero_a1-layout .pk-text,
.mira_hero_a1-layout .pk-button-group {
    margin-top: calc(2 * var(--su));
}

@media screen and (min-width: 993px) {
	.mira_hero_a1-layout .pk-button-group {
		position: absolute;
		left: calc(3 * var(--su));
		bottom: calc(3 * var(--su));
		z-index: 2;
	}
}
/* 
//TODO: positionering van de achtergrond op mobiel goed krijgen
*/
@media screen and (max-width: 767px) {
	.mira_hero_a1-layout {
		justify-content: start;
	}
	.mira_hero_a1-layout .pk-grid-container {
		flex-grow: 1; align-items: flex-start;
	}
	.mira_hero_a1-layout .pk-col {
		display: flex; flex-direction: column;
		padding-block: 3rem 2rem; height: 100%;
	}

	.mira_hero_a1-layout .pk-text {
		margin-top: auto;
	}

	.mira_hero_a1-layout .pk-button-group .pk-button:nth-child(2) {
		display: none;
	}
}