@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
@import url('./variables.css');
@import url('./base.css');
@import url('./layout.css');
@import url('./grid.css');
@import url('./text.css');
@import url('./buttons.css');
@import url('./form.css');
@import url('./cards.css');
@import url('./pills.css');
@import url('./dropdown.css');
@import url('./pagination.css');
@import url('./breadcrumb.css');
@import url('./accordion.css');
@import url('./alert.css');
@import url('./header.css');
@import url('./footer.css');

/* [ IMAGES ] */
.img-fluid {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.img-contained {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.aspect-16x9 {
  aspect-ratio: 16/9;
}
.img-bg-backdrop {
  position: relative;
  z-index: 1;
}
.img-bg-backdrop::before {
  content: '';
  display: block;
  height: 100%;
  width: 100%;
  position: absolute;
  left: 0.5rem;
  top: 0.5rem;
  background-color: var(--primary);
  z-index: -1;
}

/* [ FILTER BUTTON ] */
.btn-filter {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;

  background-color: var(--cinza-light);
  border: none;
  border-radius: var(--radius-1);
  transition: var(--transition);

  font-size: 0.75rem;
  font-weight: var(--semi-bold);
  text-transform: uppercase;
  letter-spacing: 10%;
  color: var(--black-3);
}
.btn-filter:not(.active):hover {
  background-color: var(--cinza);
}
.btn-filter.active {
  background-color: var(--primary);

  color: #fff;
}