/* Free home (/free). Tokens and shared blocks (CTA band, typography) come from PublicHome/HomePage.css. */
.gf-free__promo { padding-top: 40px; padding-bottom: 20px; }

.gf-free__intro { display: flex; gap: 40px; align-items: flex-start; padding-top: var(--gf-gap-80); padding-bottom: var(--gf-gap-80); }
.gf-free__intro-title { flex: 0 0 45%; }
.page-wrapper .gf-home .gf-free__intro-title h1 { font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.65rem); line-height: 1.15; margin-bottom: 30px; }
.gf-free__intro-title img { width: 220px; }
.gf-free__intro-text { flex: 1 1 55%; font-size: var(--gf-medium); font-weight: 400; line-height: 1.6; }

.gf-free__columns { background: #fbfaf3; padding: 90px 0; }
.gf-free__columns-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px 30px; }
.page-wrapper .gf-home .gf-free__columns h2 { font-size: var(--gf-xxl); font-weight: 400; line-height: 1.1; margin-bottom: 40px; }
.gf-free__columns p { font-size: var(--gf-medium); font-weight: 400; line-height: 1.6; }

.gf-free__gift { display: flex; gap: 50px; align-items: center; padding-top: var(--gf-gap-80); padding-bottom: 0; }
.gf-free__gift img { flex: 0 0 280px; width: 280px; height: auto; object-fit: contain; }
.page-wrapper .gf-home .gf-free__gift h2 { font-size: var(--gf-xxl); font-weight: 400; line-height: 1.1; margin-bottom: 30px; }
.gf-free__gift p { font-size: var(--gf-medium); font-weight: 400; line-height: 1.6; max-width: 780px; }

@media (max-width: 1100px) {
  .gf-free__columns-grid { grid-template-columns: repeat(2, 1fr); gap: 40px 30px; }
}
@media (max-width: 781px) {
  .gf-free__intro, .gf-free__gift { flex-direction: column; align-items: stretch; }
  .gf-free__columns { padding: 50px 0; }
  .gf-free__columns-grid { grid-template-columns: 1fr; }
  .gf-free__gift img { width: 200px; flex-basis: auto; }
}

/* ads: same placements as on the telecom tool pages */
.gf-free__ads { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; padding-top: 40px; padding-bottom: 40px; }
.gf-free__ad { min-width: 300px; min-height: 250px; display: flex; justify-content: center; }
/* under the four service tiles: same grid as the tiles (4 / 2 / 1 columns), ads as wide as a tile and about as high */
.gf-free__ads--tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; padding-top: 0; padding-bottom: 30px; }
.gf-free__ads--tiles .gf-free__ad { display: block; min-width: 0; min-height: 250px; max-height: 310px; overflow: hidden; }
/* one flexible ad where the three boxes used to be: never higher than 250px */
.gf-free__ads--singles { display: block; padding-top: 30px; padding-bottom: 30px; }
.gf-free__ads--singles .gf-free__ad { display: block; min-width: 0; min-height: 90px; max-height: 250px; overflow: hidden; }
@media (max-width: 991px) { .gf-free__ads--tiles { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px) { .gf-free__ads--tiles { grid-template-columns: 1fr; gap: 16px; } }
.gf-free__gift-image { flex: 0 0 280px; display: block; }
.gf-free__intro-text a, .gf-free__gift h2 a, .gf-free__gift p a { color: inherit; text-decoration: underline; }
@media (max-width: 781px) {
  /* column layout: the 280px basis would become a height; let the picture use the full width, centred */
  .gf-free__gift-image { flex: 0 0 auto; width: 100%; max-width: 420px; margin: 0 auto; }
  .gf-free__gift img { display: block; width: 100%; height: auto; margin: 0 auto; }
}
/* empty ad slots (blocked or unfilled) are collapsed by site.js / useCollapseEmptyAds */
.gf-free__ads[hidden], .gf-free__ad[hidden] { display: none; }