/* ==========================================================================
   Block 02 – immobilien sind eine große sache
   White section. The couple photo visible at the bottom edge in the design
   belongs to block 03 (see 03-ohne-anzug.css) and simply overflows upward
   into this block's box - nothing to position here.
   ========================================================================== */

/* Padding scales up with viewport width instead of staying fixed at the
   150px/135px spec value on every screen size - that's a lot of empty
   space relative to a small phone. The exact spec values only apply from
   64em (tablet-landscape) up. */
.block-grosse-sache {
	position: relative;
	padding: 6rem 0;
	background-color: var(--color-white);
}

@media (min-width: 30em) {
	.block-grosse-sache {
		padding: 8rem 0 7rem;
	}
}

@media (min-width: 48em) {
	.block-grosse-sache {
		padding: 11rem 0 10rem;
	}
}

@media (min-width: 64em) {
	.block-grosse-sache {
		padding: 15rem 0 13.5rem;
	}
}

.block-grosse-sache-content {
	grid-column: 1 / 13;
}

/* Spec: weight 900, 62px font-size, 68px line-height, 0 letter-spacing.
   Fluid via vw (62/1920 = 3.23vw) against the 1920px reference frame. */
.block-grosse-sache-content h2 {
	font-size: clamp(3rem, 3.23vw, 6.2rem);
	line-height: 1.1;
	letter-spacing: 0;
}

/* Spec: weight 300, 35px font-size, 47px line-height (same as hero subline). */
.block-grosse-sache-intro {
	margin-top: 60px;
	font-size: clamp(1.8rem, 1.82vw, 3.5rem);
	line-height: 1.34;
	letter-spacing: 0;
}

/* Spec: weight 300, 25px font-size, 35px line-height; the label ("wir
   finden:") is 700 instead. Same 25px ratio as the hero nav link/button. */
.block-grosse-sache-list {
	margin-top: 60px;
	font-size: clamp(1.4rem, 1.3vw, 2.5rem);
	line-height: 1.4;
	letter-spacing: 0;
}

.block-grosse-sache-list-label {
	font-weight: var(--font-weight-bold);
}

.block-grosse-sache-list ul {
	margin-top: 0.4rem;
}

.block-grosse-sache-content .btn {
	margin-top: 4rem;
}

/* From tablet up: 8 of 12 columns, 2 free columns on each side (3/11),
   leaving the couple photo (block 03) room to bleed in on the right -
   matches the design, where this block (unlike 01/03/05) isn't flush
   with the left edge. */
@media (min-width: 48em) {
	.block-grosse-sache-content {
		grid-column: 3 / 11;
	}
}