.bt-portfolio__grid{
  display:grid;
  grid-template-columns: repeat(var(--bt-cols), minmax(0, 1fr));
  gap: var(--bt-gap);
}

@media (max-width: 900px){
  .bt-portfolio__grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 560px){
  .bt-portfolio__grid{ grid-template-columns: 1fr; }
}

.bt-tile{
  border-radius: var(--bt-radius);
  overflow: hidden;
  min-height: var(--bt-minh);
  outline: none;
  position: relative;
}

.bt-tile:focus{
  box-shadow: 0 0 0 3px rgba(0,0,0,0.15);
}

.bt-tile__link{
  display:block;
  height:100%;
  color:inherit;
  text-decoration:none;
}

.bt-tile__media{
  height:100%;
  min-height: var(--bt-minh);
  position:relative;
  border-radius: var(--bt-radius);
  overflow:hidden;
  background-size: cover;
  background-repeat:no-repeat;
  background-position: 50% 50%;
  transform: translateZ(0);
}

.bt-tile__video{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
  transform: scale(1);
  transition: transform 220ms ease;
}

.bt-tile.is-image .bt-tile__media{
  transition: background-size 220ms ease, filter 220ms ease;
  background-size: 100% auto;
}

.bt-tile__overlay{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,var(--bt-overlay));
  background: color-mix(in srgb, var(--bt-overlay-color) calc(var(--bt-overlay) * 100%), transparent);
  opacity: 1;
  pointer-events:none;
}

.bt-tile__title{
  position:absolute;
  left: 16px;
  right: 16px;
  bottom: 16px;
  color: var(--bt-text);
  font-family: var(--bt-font);
  font-size: var(--bt-font-size);
  font-weight: var(--bt-font-weight);
  line-height: 1.15;
  transition: color 220ms ease;
  text-wrap: balance;
}

/* Hover + keyboard focus */
.bt-tile:hover .bt-tile__title,
.bt-tile:focus-within .bt-tile__title,
.bt-tile:focus .bt-tile__title{
  color: var(--bt-text-hover);
}

/* Image zoom */
.bt-tile.is-image:hover .bt-tile__media,
.bt-tile.is-image:focus-within .bt-tile__media,
.bt-tile.is-image:focus .bt-tile__media{
  background-size: calc(100% * var(--bt-zoom)) auto;
}

/* Video zoom (leicht) */
.bt-tile.is-video:hover .bt-tile__video,
.bt-tile.is-video:focus-within .bt-tile__video,
.bt-tile.is-video:focus .bt-tile__video{
  transform: scale(1.04);
}

/* Delayed hover text */
.bt-tile__hovertext{
  position:absolute;
  left:16px;
  right:16px;
  top:50%;
  transform: translateY(-50%);
  color: var(--bt-text);
  font-family: var(--bt-font);
  font-size: calc(var(--bt-font-size) * 0.62);
  font-weight: 400;
  line-height: 1.35;
  opacity: 0;
  transition: opacity 200ms ease;
  pointer-events:none;
}

.bt-tile.bt-align-left .bt-tile__hovertext{ text-align:left; }
.bt-tile.bt-align-center .bt-tile__hovertext{ text-align:center; }
.bt-tile.bt-align-right .bt-tile__hovertext{ text-align:right; }

.bt-tile.bt-show-hovertext .bt-tile__hovertext{ opacity: 1; }

/* stronger overlay while hover text is visible */
.bt-tile.bt-show-hovertext .bt-tile__overlay{
  background: color-mix(in srgb, var(--bt-overlay-color) 45%, transparent);
}

@media (prefers-reduced-motion: reduce){
  .bt-tile__video,
  .bt-tile__media,
  .bt-tile__title,
  .bt-tile__hovertext{
    transition: none !important;
  }
}