.itn-teaser-wall {
  --gap: var(--itn-teaser-wall-gap, 16px);
  --cols-desktop: var(--itn-teaser-wall-cols-desktop, 3);
  --cols-tablet: var(--itn-teaser-wall-cols-tablet, 2);
  --cols-mobile: var(--itn-teaser-wall-cols-mobile, 1);
  position: relative;
  margin: 0 auto;
  border: var(--itn-teaser-wall-border-width, 0px) var(--itn-teaser-wall-border-style, none) var(--itn-teaser-wall-border-color, transparent);
  border-radius: var(--itn-teaser-wall-border-radius, 0px);
  box-sizing: border-box;
}

.itn-teaser-wall-inner {
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(var(--cols-desktop), minmax(0, 1fr));
}

.itn-teaser-wall-item {
  position: relative;
  background: var(--itn-teaser-wall-item-bg, transparent);
  border: var(--itn-teaser-wall-item-border-width, 0px) var(--itn-teaser-wall-item-border-style, solid) var(--itn-teaser-wall-item-border-color, transparent);
  border-radius: var(--itn-teaser-wall-item-border-radius, 20px);
  padding: var(--itn-teaser-wall-padding-top, 12px) var(--itn-teaser-wall-padding-right, 12px) var(--itn-teaser-wall-padding-bottom, 12px) var(--itn-teaser-wall-padding-left, 12px);
  margin: var(--itn-teaser-wall-margin-top, 0px) var(--itn-teaser-wall-margin-right, 0px) var(--itn-teaser-wall-margin-bottom, 0px) var(--itn-teaser-wall-margin-left, 0px);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  opacity: 1;
  transform: none;
}

.itn-teaser-wall.is-enhanced .itn-teaser-wall-item {
  transition: opacity var(--itn-tw-transition-duration, 320ms) ease, transform var(--itn-tw-transition-duration, 320ms) ease;
}
.itn-teaser-wall-item.is-visible { opacity: 1; transform: translateY(0) scale(1); }
.itn-teaser-wall.is-enhanced .itn-teaser-wall-item.is-hidden { opacity: 0; transform: translateY(8px) scale(.99); }
.itn-teaser-wall-item[hidden] { display: none !important; }

.itn-teaser-wall-image img { width: 100%; height: auto; display: block; border-radius: var(--itn-teaser-wall-item-border-radius, 20px); }
.itn-teaser-wall-text {
  padding: var(--itn-teaser-wall-content-padding-top, 0px) var(--itn-teaser-wall-content-padding-right, 0px) var(--itn-teaser-wall-content-padding-bottom, 0px) var(--itn-teaser-wall-content-padding-left, 0px);
  margin: var(--itn-teaser-wall-content-margin-top, 12px) var(--itn-teaser-wall-content-margin-right, 0px) var(--itn-teaser-wall-content-margin-bottom, 0px) var(--itn-teaser-wall-content-margin-left, 0px);
  color: var(--itn-teaser-wall-text-color, #4d4d4d);
}

.itn-teaser-wall-buttons { margin-top: auto; display: flex; gap: 8px; flex-wrap: wrap; justify-content: var(--itn-teaser-button-justify, flex-start); }
.itn-tw-btn {
  text-decoration: none !important;
  background: var(--itn-teaser-button-normal-background, #008f88);
  color: var(--itn-teaser-button-normal-color, #fff) !important;
  font-size: var(--itn-teaser-button-normal-font-size, 16px);
  padding: var(--itn-teaser-button-normal-padding, 8px 14px);
  margin: var(--itn-teaser-button-normal-margin, 0);
  border: var(--itn-teaser-button-normal-border, 1px solid #008f88);
  border-radius: var(--itn-teaser-button-normal-radius, 999px);
  transition: all var(--itn-tw-transition-duration, 320ms) ease;
}
.itn-tw-btn:hover,
.itn-tw-btn:focus-visible {
  background: var(--itn-teaser-button-active-background, #007a74);
  color: var(--itn-teaser-button-active-color, #fff) !important;
  font-size: var(--itn-teaser-button-active-font-size, 16px);
  padding: var(--itn-teaser-button-active-padding, 8px 14px);
  margin: var(--itn-teaser-button-active-margin, 0);
  border: var(--itn-teaser-button-active-border, 1px solid #008f88);
  border-radius: var(--itn-teaser-button-active-radius, 999px);
}

.itn-teaser-wall-fulllink { position: absolute; inset: 0; z-index: 1; border-radius: var(--itn-teaser-wall-item-border-radius, 20px); }
.itn-teaser-wall-buttons, .itn-teaser-wall-text { position: relative; z-index: 2; }

.itn-tw-hover-zoom .itn-teaser-wall-item {
  overflow: hidden;
}
.itn-tw-hover-zoom .itn-teaser-wall-image img {
  transition: transform var(--itn-tw-transition-duration, 320ms) ease;
}
.itn-tw-hover-zoom .itn-teaser-wall-item:hover .itn-teaser-wall-image img,
.itn-tw-hover-zoom .itn-teaser-wall-item:focus-within .itn-teaser-wall-image img {
  transform: scale(1.05);
}

.itn-tw-hover-overlay .itn-teaser-wall-image {
  position: relative;
  overflow: hidden;
  border-radius: var(--itn-teaser-wall-item-border-radius, 20px);
}
.itn-tw-hover-overlay .itn-teaser-wall-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--itn-hover-overlay-background, #000);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--itn-tw-transition-duration, 320ms) ease;
}
.itn-tw-hover-overlay .itn-teaser-wall-item:hover .itn-teaser-wall-image::after,
.itn-tw-hover-overlay .itn-teaser-wall-item:focus-within .itn-teaser-wall-image::after {
  opacity: var(--itn-hover-overlay-opacity, .3);
}

.itn-tw-filters { display: flex; flex-wrap: wrap; justify-content: var(--itn-filter-button-justify, flex-start); gap: 8px; margin: 0 0 16px; }
.itn-tw-filter-button {
  cursor: pointer;
  border: var(--itn-filter-button-normal-border, 1px solid #008f88);
  border-radius: var(--itn-filter-button-normal-radius, 8px);
  color: var(--itn-filter-button-normal-color, #008f88);
  background: var(--itn-filter-button-normal-background, #fff);
  font-size: var(--itn-filter-button-normal-font-size, 16px);
  padding: var(--itn-filter-button-normal-padding, 8px 14px);
  margin: var(--itn-filter-button-normal-margin, 0);
  transition: all var(--itn-tw-transition-duration, 320ms) ease;
}
.itn-tw-filter-button.is-active,
.itn-tw-filter-button:hover,
.itn-tw-filter-button:focus-visible {
  border: var(--itn-filter-button-active-border, 1px solid #008f88);
  border-radius: var(--itn-filter-button-active-radius, 8px);
  color: var(--itn-filter-button-active-color, #fff);
  background: var(--itn-filter-button-active-background, #008f88);
  font-size: var(--itn-filter-button-active-font-size, 16px);
  padding: var(--itn-filter-button-active-padding, 8px 14px);
  margin: var(--itn-filter-button-active-margin, 0);
}

.itn-tw-load-more-wrap { margin-top: 16px; display: flex; justify-content: var(--itn-load-more-button-justify, flex-start); }
.itn-tw-load-more {
  cursor: pointer;
  border: var(--itn-load-more-button-normal-border, 1px solid #008f88);
  border-radius: var(--itn-load-more-button-normal-radius, 8px);
  color: var(--itn-load-more-button-normal-color, #fff);
  background: var(--itn-load-more-button-normal-background, #008f88);
  font-size: var(--itn-load-more-button-normal-font-size, 16px);
  padding: var(--itn-load-more-button-normal-padding, 8px 14px);
  margin: var(--itn-load-more-button-normal-margin, 0);
  transition: all var(--itn-tw-transition-duration, 320ms) ease;
}
.itn-tw-load-more:hover,
.itn-tw-load-more:focus-visible {
  border: var(--itn-load-more-button-active-border, 1px solid #008f88);
  border-radius: var(--itn-load-more-button-active-radius, 8px);
  color: var(--itn-load-more-button-active-color, #fff);
  background: var(--itn-load-more-button-active-background, #007a74);
  font-size: var(--itn-load-more-button-active-font-size, 16px);
  padding: var(--itn-load-more-button-active-padding, 8px 14px);
  margin: var(--itn-load-more-button-active-margin, 0);
}

.itn-teaser-wall.itn-tw-layout-masonry .itn-teaser-wall-inner {
  column-count: var(--cols-desktop);
  column-gap: var(--gap);
  display: block;
}
.itn-teaser-wall.itn-tw-layout-masonry .itn-teaser-wall-item {
  break-inside: avoid;
  margin-bottom: var(--gap);
  width: 100%;
}

.itn-teaser-wall.itn-tw-layout-mosaic .itn-teaser-wall-inner {
  grid-auto-flow: dense;
}
.itn-teaser-wall.itn-tw-layout-mosaic .itn-teaser-wall-item:nth-child(6n+1),
.itn-teaser-wall.itn-tw-layout-mosaic .itn-teaser-wall-item:nth-child(6n+4) {
  grid-column: span 2;
}

.itn-teaser-wall-edit-link-wrap { margin: 12px 0 0; }
.itn-teaser-wall-edit-link { display: inline-block; padding: 6px 12px; border: 1px solid #2271b1; background: #f6f7f7; text-decoration: none !important; }