/* Root */
.lfpr {
  --gap: var(--lfpr-gap, 4rem);
  --border-radius: var(--lfpr-border-radius, 50px);
  --font-size: var(--lfpr-font-size, 1rem);
  --filter-background: var(--lfpr-filter-background, #fff);
  --filter-background-hover: var(--lfpr-filter-background-hover, #333);
  --filter-color: var(--lfpr-filter-color, #333);
  --filter-color-hover: var(--lfpr-filter-color-hover, #eee);
  --filter-color-active: var(--lfpr-filter-color-active, #eee);
  --filter-border-radius: var(--lfpr-filter-border-radius, 24rem);
  --filter-padding: var(--lfpr-filter-padding, .5em 1em);
  --filter-font-size: var(--lfpr-filter-font-size, .9em);
  --project-background: var(--lfpr-project-background, #fff);
  --project-background-hover: var(--lfpr-project-background-hover, #eee);
  --project-color: var(--lfpr-project-color, #333);
  --project-color-hover: var(--lfpr-project-color-hover, #111);
}

/* Filters */
.lfpr__filters {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 2rem;
}

.lfpr__filter {
  appearance: none;  
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
  background: var(--filter-background);
  color: var(--filter-color);
  padding: var(--filter-padding);
  border-radius: var(--filter-border-radius);
  font-size: var(--filter-font-size);
}

.lfpr__filter:hover,
.lfpr__filter:focus,
.lfpr__filter--active {  
  background: var(--filter-background-hover);  
  color: var(--filter-color-hover);
  box-shadow: none;
}

.lfpr__projects {
  display: grid;
  gap: var(--gap);
}

@media (min-width: 600px) {
  .lfpr__projects {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1000px) {
  .lfpr__projects {
    grid-template-columns: repeat(3, 1fr);
  }
}

.lfpr-project {
  text-align: center;
  background: var(--project-background);
  color: var(--project-color);
  border-radius: var(--border-radius);
  overflow: hidden;
  transition-property: background;
  transition-duration: .3s;
  transition-timing-function: ease;
}

.lfpr-project--hidden {
  display: none;
}

.lfpr-project:hover,
.lfpr-project:focus-within {
  background: var(--project-background-hover);
  color: var(--project-color-hover);
}

.lfpr-project:hover .lfpr-project__media,
.lfpr-project:focus-within .lfpr-project__media {
  filter: brightness(1.1);
}

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

.lfpr-project__link:hover,
.lfpr-project__link:focus {
  color: inherit;
}

.lfpr-project__figure {
  aspect-ratio: 16/9;
  background: #f3f4f6;
  overflow: hidden;
}

.lfpr-project__media {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: filter .3s ease;  
}

.lfpr-project__placeholder {
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
    -45deg,
    #f5f5f5,
    #f5f5f5 10px,
    #f0f0f0 10px,
    #f0f0f0 20px
  );
}

.lfpr-project__title {
  margin-block: .75rem !important;
  padding-inline: 1rem;
  font-size: 1.75em;  
  color: inherit;
}

.lfpr-project__excerpt {  
  color: inherit;
  font-size: .95rem;
  padding-inline: 1rem;
  margin-block-end: 1rem !important;
}

.lfpr__empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 2rem 1rem;
  color: #6b7280;
}