.target-groups {
  --tile-padding: 10px;
  padding: var(--container-padding);
  margin: calc(var(--font-size-lg) + 10px) 0;
}
.target-groups .intro {
  max-width: 1000px;
  margin: 0 auto var(--font-size-xl);
  font-size: var(--font-size-sm);
  text-align: center;
}
.target-groups .section-title {
  position: relative;
  display: block;
  font-size: var(--font-size-xl);
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 0.5em;
  text-wrap: pretty;
  margin-top: 0;
}
.target-groups .tiles {
  position: relative;
  display: flex;
  margin: 0 calc(var(--tile-padding) * -1 - 2px);
}
.target-groups .col {
  padding: var(--tile-padding);
  flex: 1 1 100%;
}
.target-groups .tile {
  position: relative;
  display: block;
  background-color: var(--dark-color);
  color: var(--white);
  padding: 2em;
  border-radius: 12px;
  height: 100%;
}
.target-groups .icon {
  --icon-size: 40px;
  --icon-color: var(--dark-color);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--icon-size) * 1.75);
  aspect-ratio: 1;
  background-color: var(--primary-color);
  border-radius: 12px;
}
.target-groups .icon::before {
  content: "";
  display: inline-block;
  vertical-align: text-top;
  background-color: var(--icon-color, var(--dark-color));
  width: var(--icon-size, 1em);
  height: var(--icon-size, 1em);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask: var(--icon) no-repeat center;
  mask: var(--icon) no-repeat center;
}
.target-groups .image-box {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 3/2;
  border-radius: 12px;
  overflow: hidden;
}
.target-groups .image-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.target-groups .tile-title {
  margin: 1em 0 0.5em 0;
  font-size: var(--font-size-md);
  line-height: 1.4;
  font-weight: 700;
  color: var(--primary-color);
  hyphens: auto;
}
.target-groups .button-wrapper {
  text-align: center;
  margin-top: var(--font-size-xl);
}
.target-groups .button-wrapper .button {
  margin: 0;
}
@media (min-width: 568px) and (max-width: 1499px) {
  .target-groups .tiles {
    flex-wrap: wrap;
  }
  .target-groups .col {
    flex: 1 1 50%;
    max-width: 50%;
  }
  .target-groups .icon {
    --icon-size: 40px;
  }
}
@media (max-width: 1250px) and (min-width: 568px) {
  .target-groups .intro {
    max-width: 1140px;
    text-align: left;
  }
  .target-groups .intro > * {
    max-width: 740px;
  }
}
@media (min-width: 1250px) and (max-width: 1499px) {
  .target-groups .tiles {
    max-width: calc(1140px + var(--tile-padding) * 2);
    margin: 0 auto;
  }
}
@media (max-width: 567px) {
  .target-groups {
    --tile-padding: 4px;
  }
  .target-groups .button-wrapper {
    text-align: left;
  }
  .target-groups .intro {
    text-align: left;
    margin-bottom: 2em;
  }
  .target-groups .tiles {
    overflow: auto;
    max-width: 100vw;
    margin: 0 calc(var(--container-padding) * -1);
    padding: 0 calc(var(--container-padding) - var(--tile-padding) - 2px) 10px;
    scroll-snap-type: x mandatory;
  }
  .target-groups .tiles .col {
    scroll-snap-align: center;
  }
  .target-groups .tiles::after {
    content: "";
    display: block;
    min-width: 100px;
  }
  .target-groups .tile {
    min-width: 290px;
    max-width: 340px;
    width: 88vw;
  }
  .target-groups .icon {
    --icon-size: 40px;
  }
}

/*# sourceMappingURL=target-groups.css.map */