/* compiled by scssphp 1.6.0 on Fri, 08 May 2026 09:18:32 +0000 (0.0588s) */

.cta-image {
  --cta-image__container-width: 100%;
  --cta-image__container-padding: var(--padding-xlarge);
  --cta-image__container-border-radius: var(--border-radius-small);
  --cta-image__container-margin-block: 0;
  --cta-image__container-grid-gap: 0.75rem;
  --button__background--primary--hover: var(--color-4);
  --button__color--primary--hover: var(--color-white);
  --cta-image__min-height: auto;
  padding-block: var(--padding-xlarge);
  overflow: hidden;
}
.cta-image__container {
  background-color: var(--color-2);
  color: var(--color-white);
  grid-template-columns: subgrid;
  grid-template-rows: repeat(4, auto);
  place-items: flex-start;
  position: relative;
  overflow: hidden;
  width: var(--cta-image__container-width);
  padding: var(--cta-image__container-padding, 2.5rem);
  border-radius: var(--cta-image__container-border-radius, 1rem);
  margin-inline: auto;
  margin-block: var(--cta-image__container-margin-block, 3rem);
  display: grid;
  grid-column: 2/-2;
  grid-row: 1;
  grid-gap: 0;
}
.cta-image__container > * {
  position: relative;
  z-index: 3;
}
.cta-image__heading {
  grid-column: 1/-1;
  grid-row: 1;
  margin-block-end: 0.75rem;
}
@media (min-width: 48rem) {
  .cta-image__heading {
    grid-column: 1/8;
  }
}
.cta-image__content {
  grid-column: 1/-1;
  grid-row: 2;
  color: var(--color-grey-4);
}
@media (min-width: 48rem) {
  .cta-image__content {
    grid-column: 1/8;
  }
}
.cta-image__content p {
  margin-block-end: 0;
}
.cta-image .button {
  grid-column: 1/-1;
  grid-row: 3;
  margin-block-start: 5.625rem;
}
@media (min-width: 48rem) {
  .cta-image .button {
    grid-column: 1/8;
    margin-block-start: auto;
  }
}
.cta-image__image-wrapper {
  position: absolute;
  z-index: 1;
}
.cta-image--stairs .cta-image__image {
  block-size: 100%;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='418' height='370' viewBox='0 0 418 370' fill='none'%3E%3Cpath d='M418 362C418 366.418 414.418 370 410 370H8C3.58172 370 0 366.418 0 362V230C0 225.582 3.58172 222 8 222H66C70.4183 222 74 218.418 74 214V157C74 152.582 77.5817 149 82 149H140C144.418 149 148 145.418 148 141V82C148 77.5817 151.582 74 156 74H214C218.418 74 222 70.4183 222 66V8C222 3.58172 225.582 0 230 0H410C414.418 0 418 3.58172 418 8V362Z' fill='%23091540'/%3E%3C/svg%3E");
  mask-repeat: no-repeat;
  mask-position: center bottom;
  mask-size: 100%;
  object-fit: cover;
  scale: 1.05;
}
.cta-image--stairs .cta-image__image-wrapper {
  max-inline-size: 14.75rem;
  inset-inline-end: 0;
  inset-block-end: 0;
  inset-block-start: auto;
}
@media (min-width: 48rem) {
  .cta-image--stairs .cta-image__image-wrapper {
    max-inline-size: 22.25rem;
    inset-block-start: 0;
  }
}
@media (min-width: 64rem) {
  .cta-image--stairs .cta-image__image-wrapper {
    max-inline-size: 31.25rem;
  }
}
.cta-image--stairs .cta-image__content {
  margin-block-end: var(--margin-large);
}
.cta-image--stairs .button.--primary:hover, .cta-image--stairs .button.--primary:focus-visible {
  --button__background--primary--hover: var( --color-white );
  --button__color--primary--hover: var( --color-text );
}
.cta-image--stairs .button.--primary:hover .icon, .cta-image--stairs .button.--primary:focus-visible .icon {
  background: var(--color-2);
  color: var(--color-white);
}
.cta-image--center .cta-image__image-wrapper {
  inset-inline-end: -13.5rem;
  inset-block-end: -10.5rem;
}
@media (min-width: 64rem) {
  .cta-image--center .cta-image__image-wrapper {
    inset-inline-end: 22%;
    inset-block-end: -11.5rem;
  }
}
.cta-image--center .button {
  grid-column: 1/-1;
  grid-row: 3;
  margin-block-start: 5.625rem;
}
@media (min-width: 64rem) {
  .cta-image--center .button {
    grid-column: -5/-1;
    grid-row: 1/-1;
    align-self: end;
    justify-self: end;
    margin-block-start: 0;
  }
}
@media (min-width: 85rem) {
  .cta-image--center .button {
    grid-column: -4/-1;
  }
}
.cta-image--center .button.--primary:hover, .cta-image--center .button.--primary:focus-visible {
  --button__background--primary--hover: var( --color-white );
  --button__color--primary--hover: var( --color-text );
}
.cta-image--center .button.--primary:hover .icon, .cta-image--center .button.--primary:focus-visible .icon {
  background: var(--color-2);
  color: var(--color-white);
}
.cta-image--center .cta-image__heading, .cta-image--center .cta-image__content {
  grid-column: 1/-1;
}
@media (min-width: 48rem) {
  .cta-image--center .cta-image__heading, .cta-image--center .cta-image__content {
    grid-column: 1/8;
  }
}
@media (min-width: 64rem) {
  .cta-image--center .cta-image__heading, .cta-image--center .cta-image__content {
    grid-column: 1/6;
  }
}
.cta-image.cta-image--right .cta-image__container {
  background-color: transparent;
  color: var(--color-text);
  grid-template-columns: unset;
  grid-template-rows: unset;
  place-items: center;
  place-content: center;
  padding: 0;
  overflow: unset;
}
.cta-image.cta-image--right .cta-image__container .button {
  margin-block-start: 1.25rem;
}
.cta-image.cta-image--right .cta-image__content {
  max-inline-size: 34rem;
  color: var(--color-text);
  text-align: center;
}
.cta-image.cta-image--right .cta-image__image-wrapper {
  inset-inline-end: -3rem;
  inset-block-end: -6.625rem;
  display: none;
}
@media (min-width: 64rem) {
  .cta-image.cta-image--right .cta-image__image-wrapper {
    display: block;
  }
}
@media (min-width: 85rem) {
  .cta-image.cta-image--right .cta-image__image-wrapper {
    inset-inline-end: 2rem;
  }
}
.cta-image.cta-image--right .cta-image__image-wrapper img {
  inline-size: 21.375rem;
  block-size: 20.125rem;
}
/*# sourceMappingURL=data:application/json,%7B%22version%22%3A3%2C%22sources%22%3A%5B%22home%2Ftrapverbouwing%2Fdomains%2Ftrapverbouwing.nl%2Fpublic_html%2Fwp-content%2Fthemes%2Ftrapverbouwing%2Fsass%2Fsections%2Fcta-image.scss%22%5D%2C%22names%22%3A%5B%5D%2C%22mappings%22%3A%22AAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAYC%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAkBC%3BAAAA%3BAAAA%3BAAAA%3BAAMD%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAKC%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAKD%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAKC%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAIA%3BAAAA%3BAAAA%3BAAKD%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAKC%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAMD%3BAAAA%3BAAAA%3BAAAA%3BAAMC%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAASC%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAMC%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAKA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAMF%3BAAAA%3BAAAA%3BAAKC%3BAAAA%3BAAAA%3BAAAA%3BAAKC%3BAAAA%3BAAAA%3BAAAA%3BAASF%3BAAAA%3BAAAA%3BAAAA%3BAAIC%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAMD%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAKC%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAQA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAMA%3BAAAA%3BAAAA%3BAAAA%3BAAKC%3BAAAA%3BAAAA%3BAAAA%3BAAOF%3BAAAA%3BAAAA%3BAAIC%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAIA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAOD%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAUC%3BAAAA%3BAAAA%3BAAKD%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAMA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAKC%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAIA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAIA%3BAAAA%3BAAAA%3BAAAA%22%7D */