.tf-gallery {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
}
.tf-gallery figure.tf-gallery_inner {
  container: tf-gallery_inner / inline-size;
}
.tf-gallery figure.tf-gallery_inner .galleryholder {
  width: 100%;
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(4, 1fr);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
}
@container tf-gallery_inner (min-width: 1041px) {
  .tf-gallery figure.tf-gallery_inner .galleryholder {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
  }
}
@container tf-gallery_inner (max-width: 1040px) {
  .tf-gallery figure.tf-gallery_inner .galleryholder {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 160px), 1fr));
  }
}
@container tf-gallery_inner (max-width: 760px) {
  .tf-gallery figure.tf-gallery_inner .galleryholder {
    gap: 10px;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 160px), 1fr));
  }
}
@container tf-gallery_inner (max-width: 420px) {
  .tf-gallery figure.tf-gallery_inner .galleryholder {
    gap: 8px;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 120px), 1fr));
  }
}
.tf-gallery figure.tf-gallery_inner .galleryholder a {
  display: block;
  width: 100%;
  aspect-ratio: 10 / 8;
  position: relative;
  overflow: clip;
  border-radius: var(--radius-300);
}
.tf-gallery figure.tf-gallery_inner .galleryholder a img {
  position: absolute;
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
  height: 100%;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.tf-gallery figure.tf-gallery_inner .galleryholder a::after {
  content: "";
  display: block;
  position: absolute;
  z-index: 3;
  background: rgba(0, 0, 0, 0.5);
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  -webkit-transition: 500ms cubic-bezier(0.42, 0, 0.58, 1) all;
  transition: 500ms cubic-bezier(0.42, 0, 0.58, 1) all;
}
.tf-gallery figure.tf-gallery_inner .galleryholder a:hover::after,
.tf-gallery figure.tf-gallery_inner .galleryholder a:active::after {
  opacity: 1;
}
.tf-gallery figure.tf-gallery_inner figcaption {
  width: 100%;
  font-family: var(--inter);
  font-weight: var(--regular);
  color: var(--cfont);
  font-size: var(--p-300-size);
  line-height: var(--p-300-line);
  color: var(--cfontl);
  padding: 3px 10px;
}