.benefits {
	display: block;
	padding-bottom: 1.8rem;
	background-color: #0e1b10;
}

.benefits .label-line {
		margin-bottom: 0.8rem;
	}

.benefits .cards {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 1.2rem;
		row-gap: 0.8rem;
		max-width: 7.51rem;
		margin-left: auto;
		margin-right: 0;
		padding: 0;
	}

.benefits .card {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		min-height: 4.14rem;
	}

:is(.benefits .card) .cnt {
			display: block;
		}

:is(:is(.benefits .card) .cnt) .card-title {
				display: block;
				font-size: 0.14rem;
				line-height: 1.2;
				letter-spacing: 0.3em;
				font-weight: 400;
				text-transform: uppercase;
				color: var(--color-gold);
				padding-bottom: 0.26rem;
				margin-bottom: 0.16rem;
				border-bottom: 0.01rem solid var(--color-gold);
			}

:is(:is(.benefits .card) .cnt) .text {
				color: var(--color-grey);
				min-height: 0.52rem;
			}

@media screen and (max-width: 768px) and (orientation: portrait) {

	.benefits {
		padding-bottom: 0.8rem;
}

		.benefits .label-line {
			margin-bottom: 0.45rem;
		}

		.benefits .cards {
			--distance: 1.5rem;
			
			gap: 0.3rem;
			row-gap: 0.45rem;
			padding: 0;
			padding-bottom: var(--distance);
		}

			:is(.benefits .cards)  > div:nth-child(even) {
				transform: translateY(var(--distance));
			}

		.benefits .card {
			min-height: auto;
		}
			
			:is(.benefits .card) .media {
				margin-bottom: 0.27rem;
			}	
				:is(:is(.benefits .card) .cnt) .card-title {
					display: block;
					font-size: 0.11rem;
					letter-spacing: 0.26em;
					padding-bottom: 0.16rem;
				}

				:is(:is(.benefits .card) .cnt) .text {
					min-height: auto;
				}
	}