:root {
  --button-color-outline: var(--color-border-tertiary);
  --button-color-text: var(--color-text-button);
  --button-color-text-hover: var(--color-text-secondary);
  --button-color-background-hover: var(--color-surface-secondary);
  --button-color-highlight-text: var(--button-color-text);
  --button-highlight-background: var(--color-surface-highlight);
  --button-highlight-color-background-hover: var(--button-color-background-hover);
  --button-highlight-color-text-hover: var(--button-color-text-hover);
}

.block__tlb-image-pack {
  display: flex;
  justify-content: center;
  padding: var(--spacing-lglg) 0;
  --color-heading: var(--color-text-heading);
}
.block__tlb-image-pack.bg-white, .block__tlb-image-pack.bg- {
  background: var(--color-surface-primary);
}
.block__tlb-image-pack.bg-white + .block__tlb-image-pack.bg-white, .block__tlb-image-pack.bg-white + .block__tlb-image-pack.bg-, .block__tlb-image-pack.bg- + .block__tlb-image-pack.bg-white, .block__tlb-image-pack.bg- + .block__tlb-image-pack.bg- {
  padding-top: 0;
}
.block__tlb-image-pack.bg-green, .block__tlb-image-pack.bg-dark {
  color: var(--color-text-secondary);
  --color-heading: var(--color-text-secondary);
  --button-color-background-hover: var(--color-brand-white);
  --button-color-outline: var(--color-brand-white);
  --button-color-text: var(--color-brand-white);
  --button-color-text-hover: var(--color-text-primary);
  --button-color-highlight-text: var(--color-text-primary);
}
.block__tlb-image-pack.bg-green {
  background: var(--color-surface-secondary);
}
.block__tlb-image-pack.bg-green + .block__tlb-image-pack.bg-green {
  padding-top: 0;
}
.block__tlb-image-pack.bg-dark {
  background: var(--color-surface-dark);
}
.block__tlb-image-pack.bg-dark + .block__tlb-image-pack.bg-dark {
  padding-top: 0;
}
.block__tlb-image-pack.bg-off-white {
  background: var(--color-surface-tertiary);
}
.block__tlb-image-pack.bg-off-white + .block__tlb-image-pack.bg-off-white {
  padding-top: 0;
}
.block__tlb-image-pack .wrapper {
  width: 100%;
  max-width: var(--container-width);
}
.block__tlb-image-pack .wrapper .title {
  text-align: center;
  color: var(--color-text-heading);
}
.block__tlb-image-pack .wrapper .title h3 {
  font: var(--type-b2);
  margin-bottom: var(--spacing-smd);
}
.block__tlb-image-pack .wrapper .title h2 {
  font: var(--type-h2);
  margin-bottom: var(--spacing-lg);
}
.block__tlb-image-pack .wrapper .items {
  display: flex;
  gap: var(--spacing-lg);
}
.block__tlb-image-pack .wrapper .items .item {
  width: 100%;
}
.block__tlb-image-pack .wrapper .items .item:hover .media img, .block__tlb-image-pack .wrapper .items .item:hover .media video {
  transform: scale(1.1);
}
.block__tlb-image-pack .wrapper .items .item .media {
  aspect-ratio: 1/1;
  position: relative;
  overflow: hidden;
  margin-bottom: 32px;
  border-radius: var(--radius-small);
}
.block__tlb-image-pack .wrapper .items .item .media img, .block__tlb-image-pack .wrapper .items .item .media video {
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  transition: transform 0.3s;
}
.block__tlb-image-pack .wrapper .items .item h3 {
  font: var(--type-h2);
  margin-bottom: var(--spacing-smd);
  color: var(--color-heading);
}
.block__tlb-image-pack .wrapper .items .item p {
  font: var(--type-b3);
  margin-bottom: 32px;
}
.block__tlb-image-pack .wrapper .items .item .cta {
  padding: 11px var(--spacing-smd);
  display: inline-block;
  font: var(--type-b3);
  border-radius: var(--radius-small);
  color: var(--button-color-text);
  transition: color 0.3s, background 0.3s;
  text-wrap: nowrap;
  color: var(--button-color-highlight-text);
  background: var(--button-highlight-background);
}
.block__tlb-image-pack .wrapper .items .item .cta:hover {
  color: var(--button-color-text-hover);
  background: var(--button-color-background-hover);
}
.block__tlb-image-pack .wrapper .items .item .cta:hover {
  color: var(--button-highlight-color-text-hover);
  background: var(--button-highlight-color-background-hover);
}
.block__tlb-image-pack:not(.show-cta-1) .wrapper .items .item:hover .media img, .block__tlb-image-pack:not(.show-cta-1) .wrapper .items .item:hover .media video {
  transform: scale(1.1);
}
.block__tlb-image-pack:not(.show-cta-1) .wrapper .items .item:hover h3 {
  text-decoration: underline;
}
.block__tlb-image-pack.count-2 .wrapper .items .item .media, .block__tlb-image-pack.count-3 .wrapper .items .item .media {
  aspect-ratio: 150/95;
}
.block__tlb-image-pack.count-4 .wrapper .items {
  gap: var(--spacing-smd);
}
.block__tlb-image-pack.count-4 .wrapper .items .item .media {
  margin-bottom: var(--spacing-sm);
}
.block__tlb-image-pack.count-4 .wrapper .items .item h3 {
  font: var(--type-b2);
  margin-bottom: var(--spacing-sm);
}
@media screen and (max-width: 768px) {
  .block__tlb-image-pack .wrapper .items {
    flex-direction: column;
    gap: var(--spacing-md);
  }
}