/* acf-blocks/cbf-main-content.php */

.cbf-main-content {
  padding-bottom: 40px;
}

@media (min-width: 1024px) {
  .cbf-main-content {
    padding-top: 40px;
  }
}

.cbf-main-content__header {
  margin-bottom: 48px;
}

.cbf-main-content__title {
  font-size: 24px;
  text-align: center;
  color: var(--cbf-theme-green);
  margin-top: 0;
  margin-bottom: 24px;
}

@media (min-width: 1024px) {
  .cbf-main-content__title {
    font-size: 48px;
    margin-bottom: 48px;
  }
}

.cbf-main-content__text,
.cbf-main-content__text p {
  font-size: 16px;
  line-height: 1.375;
  color: #303030;
}

.cbf-main-content__text p:last-child {
  margin-bottom: 0;
}

@media (min-width: 1024px) {
  .cbf-main-content__text,
  .cbf-main-content__text p {
    font-size: 24px;
  }
}

.cbf-main-content__block {
  display: grid;
  row-gap: 28px;
}

@media (min-width: 1024px) {
  .cbf-main-content__block {
    row-gap: 40px;
  }
}

.cbf-main-content__instructions {
  padding: 24px 16px;
  background-color: var(--cbf-theme-green-light);
  border-radius: 20px;
}

@media (min-width: 1024px) {
  .cbf-main-content__instructions {
    padding: 40px;
  }
}

.cbf-main-content__instructions__heading {
  font-family: 'Roboto';
  font-size: 20px;
  font-weight: 700;
  line-height: 1.375;
  text-align: center;
  text-transform: none;
  text-wrap: balance;
  color: #303030;
  margin: 0 0 20px;
}

@media (min-width: 1024px) {
  .cbf-main-content__instructions__heading {
    font-size: 24px;
    text-align: left;
    text-wrap: pretty;
  }
}

.cbf-main-content__instructions__text,
.cbf-main-content__instructions__text p {
  font-size: 16px;
  line-height: 1.375;
}

.cbf-main-content__instructions__text p:last-child {
  margin-bottom: 0;
}

@media (min-width: 1024px) {
  .cbf-main-content__instructions__text,
  .cbf-main-content__instructions__text p {
    font-size: 20px;
  }
}

.cbf-main-content__steps {
  display: grid;
  row-gap: 24px;
  margin-bottom: 32px;
}

.cbf-main-content__steps__item {
  display: flex;
  column-gap: 16px;
}

.cbf-main-content__steps__badge {
  display: flex;
  flex: 0 0 80px;
  justify-content: center;
  height: 32px;
  padding: 8px 12px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 22px;
  font-weight: 500;
  line-height: 0.65;
  text-transform: uppercase;
  color: white;
  background-color: var(--cbf-theme-green);
  border-radius: 999rem;
}

@media (min-width: 1024px) {
  .cbf-main-content__steps__badge {
    position: relative;
    flex: 0 0 164px;
    align-items: center;
    justify-content: space-between;
    height: 48px;
    font-size: 32px;
  }

  .cbf-main-content__steps__badge::before,
  .cbf-main-content__steps__badge::after {
    content: '';
    display: block;
    width: 27px;
    height: 26px;
    background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="27" height="26" fill="none" viewBox="0 0 27 26"%3E%3Cpath fill="%23D88C12" d="M26.9681 15.9155c.5612-2.6876-6.4462-1.8779-8.1361-1.8071.7023-.7666 3.9787-3.251 4.4364-4.1161.7368-1.3977-.7179-3.1125-2.2542-2.6291-1.7338.5449-3.4896 1.9148-5.2109 3.5188.3637-2.7153.254-14.3832-5.1701-9.8454-2.806 2.8108-1.4422 7.6442.2916 10.6705C8.0592 10.0108 3.3311 6.886.4278 10.0693c-2.0912 3.8574 4.0226 4.9042 6.7002 4.7656-2.3515 1.8995-7.1265 4.7719-5.6341 8.2107 3.4112 1.3884 7.1421-2.2905 9.6755-4.2454.4201 2.115.4859 7.3178 4.0476 7.1978 3.4677-.7635 2.4518-5.3568 2.063-7.8936 2.9378.5357 8.0389.8959 9.6881-2.1858z"/%3E%3Cpath fill="%23282525" d="m11.2438 16.4605.3669-.1293c.1599-.0401.2947-.114.4107-.2248.1348-.0923.2351-.2124.3072-.3602.0753-.1385.1129-.2863.1097-.4433.0251-.1539.0095-.3048-.047-.4556-.0438-.0955-.094-.1909-.1379-.2863a1.276 1.276 0 0 0-.486-.4403c-.1003-.0369-.2038-.0739-.301-.1108-.21-.0462-.417-.0431-.6208.0154-.1222.0431-.2414.0862-.3637.1293-.1599.04-.2978.1139-.4107.2247a.874.874 0 0 0-.3072.3633c-.0752.1385-.116.2863-.1129.4433a.91.91 0 0 0 .0502.4557c.0439.0954.091.1908.1348.2863.1223.1878.2884.3355.4859.4402.1004.0369.2039.0739.3011.1108.21.0462.4169.0431.6207-.0154zm4.1656-1.6441.1192-.1262a.847.847 0 0 0 .232-.4063.854.854 0 0 0 .0689-.4526c0-.1601-.0439-.3079-.1254-.4464a.94.94 0 0 0-.2853-.3941c-.0909-.0646-.1819-.1262-.2728-.1908-.1944-.0986-.395-.1478-.6145-.1416-.1034.0153-.2038.0307-.3072.0461-.2101.0616-.3888.1694-.5331.3264l-.1191.1262a.846.846 0 0 0-.232.4064c-.0659.1416-.0878.2924-.069.4525 0 .1601.0439.3079.1254.4464a.94.94 0 0 0 .2854.3941c.0909.0646.1818.1262.2727.1908.1913.0986.3982.1478.6145.1417.1004-.0154.2038-.0308.3073-.0462.2101-.0616.3888-.1693.533-.3264m-4.0902-2.0965.1317.1201a.945.945 0 0 0 .4233.2432c.1504.0677.3009.0985.464.0862.163 0 .3135-.0339.4514-.1078.1537-.0523.2853-.1385.3919-.2647.0628-.0862.1223-.1755.1819-.2586.0972-.1847.1348-.3848.1223-.5973a11 11 0 0 1-.0596-.3047c-.069-.2094-.1881-.3879-.3543-.5357-.0407-.04-.0877-.0801-.1316-.1201-.1223-.1201-.2603-.2001-.4233-.2432-.1474-.0677-.301-.0985-.4609-.0862-.163 0-.3135.0339-.4515.1077-.1505.0524-.2853.1386-.3919.2648-.0627.0862-.1223.1755-.1819.2586a1.153 1.153 0 0 0-.1222.5973c.0188.1016.0407.2031.0596.3047.0689.2094.1849.3879.3511.5357"/%3E%3Cpath fill="%23282525" d="M12.9442 16.9438c1.1789 1.0652 2.803-.6711 1.621-1.7363-1.1789-1.0652-2.803.6711-1.621 1.7363"/%3E%3C/svg%3E');
  }
}
