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

.card.--tile {
  --card__box-shadow--tile: none;
  --card__border-radius--tile: var(--border-radius-small);
  --card__background--tile: var(--color-2);
  --card__color: var(--color-white);
  --card__grid-column: 1 / -1;
  overflow: hidden;
  position: relative;
  min-height: 15.8125rem;
}
@media (min-width: 48rem) {
  .card.--tile {
    --card__grid-column: span 6;
    min-height: 18rem;
  }
}
@media (min-width: 64rem) {
  .card.--tile {
    min-height: 23.125rem;
  }
}
.card.--tile .card__link {
  padding: 2rem;
  gap: 0;
  display: flex;
  flex-direction: column;
  block-size: 100%;
  justify-content: center;
  align-items: flex-start;
  color: var(--color-white);
}
@media (min-width: 64rem) {
  .card.--tile .card__link {
    padding: 2rem 5rem;
  }
}
.card.--tile .card__link > * {
  position: relative;
  z-index: 3;
}
.card.--tile .card__link::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  inline-size: 100%;
  block-size: 100%;
  background-color: var(--color-text);
  opacity: 0.8;
}
@media (min-width: 48rem) {
  .card.--tile .card__link::before {
    opacity: 0.6;
  }
}
.card.--tile .card__link:hover .button, .card.--tile .card__link:focus-visible .button {
  background: var(--color-1);
  color: var(--color-white);
}
.card.--tile .card__link:hover .button .icon, .card.--tile .card__link:focus-visible .button .icon {
  background: var(--color-1--foreground);
  color: var(--color-1--hover);
}
.card.--tile .card__link:hover .button:has(.icon.--arrow-right):not(.--icon-only), .card.--tile .card__link:focus-visible .button:has(.icon.--arrow-right):not(.--icon-only) {
  padding-inline: 3.5rem 1.5rem;
}
.card.--tile .card__link:hover .button:has(.icon.--arrow-right):not(.--icon-only) .icon.--arrow-right, .card.--tile .card__link:focus-visible .button:has(.icon.--arrow-right):not(.--icon-only) .icon.--arrow-right {
  inset-inline-start: calc(0% + 1rem);
}
.card.--tile .card__image {
  inline-size: 100%;
  max-block-size: none;
  position: absolute;
  inset-inline-end: 0;
  inset-block-start: 0;
  z-index: 1;
  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;
  aspect-ratio: unset;
  object-fit: cover;
}
@media (min-width: 48rem) {
  .card.--tile .card__image {
    inline-size: 80%;
  }
}
@media (min-width: 64rem) {
  .card.--tile .card__image {
    inline-size: 63%;
  }
}
.card.--tile .card__title {
  padding-inline: 0;
  font-size: var(--font-size--xl);
  font-weight: var(--font-weight--semibold);
  margin-block-end: var(--margin-small);
}
.card.--tile .card__excerpt {
  padding-inline: 0;
  font-size: var(--font-size--sm);
  font-weight: var(--font-weight--regular);
  margin-block-end: var(--margin-large);
}
.card.--tile .button {
  margin-inline: 0;
  background: var(--color-3);
  color: var(--color-text);
  inline-size: 100%;
}
@media (min-width: 36rem) {
  .card.--tile .button {
    inline-size: auto;
  }
}
.card.--tile .button .icon {
  background: var(--color-3--hover);
  color: var(--color-3--hover-foreground);
}
.card.--tile .button:has(.icon.--arrow-right):not(.--icon-only) {
  padding-inline: 1.5rem 3.5rem;
}
.card.--tile.--shop {
  min-height: 6rem;
}
@media (min-width: 64rem) {
  .card.--tile.--shop {
    --card__grid-column: span 3;
  }
}
.card.--tile.--shop .card__link {
  padding: 0;
  border: solid 0.0625rem var(--color-1--border);
  border-radius: var(--border-radius-small);
  background-color: var(--color-white);
  color: var(--color-text);
}
.card.--tile.--shop .card__link::before {
  display: none;
}
.card.--tile.--shop .button {
  display: none;
}
.card.--tile.--shop .card__image {
  inline-size: 100%;
  max-block-size: none;
  position: relative;
  inset-inline-end: auto;
  inset-block-start: auto;
  block-size: 100%;
  mask-image: unset;
  aspect-ratio: 2;
}
@media (min-width: 48rem) {
  .card.--tile.--shop .card__image {
    aspect-ratio: 1.2;
  }
}
.card.--tile.--shop .card__title {
  margin-block-end: 0;
  font-size: var(--font-size--sm);
  font-weight: var(--font-weight--semibold);
  color: var(--color-text);
  padding: var(--padding-small);
}
.card.--tile-icon {
  border: solid 0.0625rem var(--color-1--border);
  border-radius: var(--border-radius-small);
  background-color: var(--background);
  color: var(--color-text);
  grid-column: span 12;
}
@media (min-width: 48rem) {
  .card.--tile-icon {
    grid-column: span 6;
  }
}
@media (min-width: 64rem) {
  .card.--tile-icon {
    grid-column: span 4;
  }
}
.card.--tile-icon .card--tile-icon__content {
  padding: 1.5rem;
}
.card.--tile-icon .card--tile-icon__header {
  display: flex;
  align-items: center;
  gap: var(--gap-small);
  margin-block-end: var(--margin-small);
}
.card.--tile-icon .card--tile-icon__icon {
  min-block-size: 1.125rem;
}
.card.--tile-icon .card--tile-icon__icon svg path {
  fill: var(--color-1);
}
.card.--tile-icon .card--tile-icon__title {
  font-weight: var(--font-weight--medium);
  font-size: 1.375rem;
}
.card.--tile-icon .card--tile-icon__description {
  font-size: 1rem;
}
.card.--tile-icon .button {
  border: 0 none;
  border-block-start: solid 0.0625rem var(--color-1--border);
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem;
}
.card.--tile-icon .button:hover, .card.--tile-icon .button:focus-visible {
  padding-inline-end: 1rem;
}
.card.--tile-icon .button.--primary {
  background-color: transparent;
  color: var(--color-text);
}
.card.--tile-icon .button.--primary .icon {
  background: var(--color-1);
  color: var(--color-white);
}
.card.--tile-icon .button.--primary:has(.icon.--arrow-right):not(.--icon-only) .icon.--arrow-right {
  position: relative;
  inset-inline-start: auto;
  inset-block-start: auto;
  transform: unset;
}
.card.--tile-icon .button.--primary:hover, .card.--tile-icon .button.--primary:focus-visible {
  background-color: transparent;
  color: var(--color-1);
}
.tiles {
  --tiles__grid-gap: 1rem;
  padding-block: var(--padding-xlarge);
  position: relative;
  z-index: 2;
}
@media (min-width: 64rem) {
  .tiles {
    --tiles__grid-gap: 1.5rem;
  }
}
.tiles__container {
  position: relative;
  z-index: 3;
}
.tiles .heading {
  margin-block-end: var(--margin-medium);
}
.tiles:has(.card.--tile.--shop) {
  background-color: var(--color-white);
  color: var(--color-text);
  margin-block: 1.5rem;
  padding-block: 3rem;
}
@media (min-width: 64rem) {
  .tiles:has(.card.--tile.--shop) {
    margin-block: 3rem;
    padding-block: 6rem;
  }
}
@media (min-width: 96rem) {
  .tiles:has(.card.--tile.--shop) {
    border-radius: var(--border-radius-small);
    margin-inline: var(--margin-medium);
  }
}
/*# 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%2F..%2Fcards%2Fcard-tile.scss%22%2C%22home%2Ftrapverbouwing%2Fdomains%2Ftrapverbouwing.nl%2Fpublic_html%2Fwp-content%2Fthemes%2Ftrapverbouwing%2Fsass%2Fsections%2F..%2Fcards%2Fcard-tile-icon.scss%22%2C%22home%2Ftrapverbouwing%2Fdomains%2Ftrapverbouwing.nl%2Fpublic_html%2Fwp-content%2Fthemes%2Ftrapverbouwing%2Fsass%2Fsections%2Ftiles.scss%22%5D%2C%22names%22%3A%5B%5D%2C%22mappings%22%3A%22AAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAUC%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAKA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAKC%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAUC%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAIA%3BAAAA%3BAAAA%3BAAAA%3BAAKA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAUC%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAOA%3BAAAA%3BAAAA%3BAAAA%3BAAIC%3BAAAA%3BAAAA%3BAAAA%3BAAKA%3BAAAA%3BAAAA%3BAAGC%3BAAAA%3BAAAA%3BAAQJ%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAcC%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAIA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAKD%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAOA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAQD%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAMC%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAIA%3BAAAA%3BAAAA%3BAAAA%3BAAKA%3BAAAA%3BAAAA%3BAAKD%3BAAAA%3BAAAA%3BAAGC%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAIA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAOC%3BAAAA%3BAAAA%3BAAKD%3BAAAA%3BAAAA%3BAAIA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAUC%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAKD%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAC5KF%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAOC%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAIA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAKC%3BAAAA%3BAAAA%3BAAIA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAOA%3BAAAA%3BAAAA%3BAAGE%3BAAAA%3BAAAA%3BAAKF%3BAAAA%3BAAAA%3BAAAA%3BAAKA%3BAAAA%3BAAAA%3BAAKD%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAASC%3BAAAA%3BAAAA%3BAAKA%3BAAAA%3BAAAA%3BAAAA%3BAAIE%3BAAAA%3BAAAA%3BAAAA%3BAAKD%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAOA%3BAAAA%3BAAAA%3BAAAA%3BACxEH%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAMC%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAIA%3BAAAA%3BAAAA%3BAAAA%3BAAKA%3BAAAA%3BAAAA%3BAAIA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAMC%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAKA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%22%7D */