.grid-box {
	opacity: 0;
}
.grid-box.animated {
    animation-name: zoomIn;
    animation-duration: 1s;
    animation-fill-mode: both;
	opacity: 1;
}
.grid-box-normal .grid-box-wrapper {
	aspect-ratio: 289 / 328;
}
.grid-box-wide .grid-box-wrapper {
	aspect-ratio: 602 / 328;
}
.grid-box-wrapper {
	background-color: var(--pn-box-bg-color);
	border-radius: 35px;
	padding: 25px 18px;
	overflow: hidden;
	margin-bottom: 30px;
	color: white;
	display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
}
.grid-box-wrapper.type-image {
	padding: 0;
}
.grid-box-media {
    object-fit: cover;
    width: 100%;
    max-width: none;
    height: 100%;
    position: relative;
    inset: 0;
}
.grid-box-wrapper h3 {
	font-size: 34px;
	font-weight: 600;
	line-height: 1.1;
	margin-bottom: 0;
}
.box-bright h3 {
	color: #397367;
}
.box-dark h3 {
	color: #A6D3A0;
}
.grid-box-wrapper p:first-of-type {
    margin-top: 15px;
}
.grid-box-wrapper p:last-of-type {
    margin-bottom: 0;
}
.grid-box-wrapper a {
	color: white;
    padding-left: 29px;
    background: url(./icon-arrow-right.svg) 0 center no-repeat transparent;
    background-size: 20px auto;
}
.grid-box-icon-wrapper {
	position: absolute;
    top: 25px;
    right: 15px;
}
.grid-box-icon {
	max-width: 82px;
}
@media (max-width: 991px) {
	.grid-box-wrapper h3 {
		hyphens: auto;
		font-size: 26px;
	}
	span[style*="font-size:40px"] {
		font-size: 28px !important;
	}
}
@media (max-width: 767px) {
	.grid-box .grid-box-wrapper {
		aspect-ratio: unset;
	}
	.grid-box-wrapper.with-icon {
		min-height: 124px;
	}
	.grid-box-wrapper.with-icon h3 {
		margin-right: 70px;
	}
}

@keyframes zoomIn {
	0% {
		opacity: 0;
		transform: scale3d(0.3, 0.3, 0.3);
	}
	50% {
		opacity: 1;
	}
}