@import 'reset.css';
@import 'fonts.css';
@import 'global.css';
@import 'header.css';
@import 'card.css';
@import 'footer.css';


.catalog {
  padding-top: clamp(1.5rem, 7vw, 7rem);
}

.catalog__inner {}

.catalog__header {
  display: flex;
  justify-content: space-between;
  margin-bottom: clamp(2rem, 5vh, 6rem);
  gap: 10px;
  flex-wrap: wrap;
}

.catalog__filter {
  display: flex;
  gap: clamp(1rem, 2vw, 3rem);
}

.catalog__filter-btn {
  border: 1px solid #898989;
  display: flex;
  gap: clamp(0.5rem, 1vw, 1rem);
  padding: 10px clamp(1rem, 2vw, 3rem);
  align-items: center;
  background-color: inherit;
  font-size: clamp(1.4rem, 2vw, 2rem);
  color: #898989;
  text-wrap: nowrap;
}

.catalog__title {
  color: var(--accent-color);
  font-size: clamp(2.5rem, 3.15vw, 6rem);
}

.catalog__link {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 47px;
  gap: 37px;
  font-size: 40px;
  border: 2px solid #000;
}

/* Override from card.css */
.catalog__card-list {
  grid-template-columns: 1fr 1fr 1fr;
  display: grid; /* This was different from catalog.css */
}