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


/* Hero */

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

.catalog__inner {}

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

.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;
}


/* Collection */

.collection {}

.collection__inner {}

.collection__hero {
  display: flex;
  align-items: center;
  margin-bottom: 60px;
  padding: 50px 50px 0 50px;
  max-height: 400px;
  overflow: hidden;
  gap: 40px;
}

.collection__info {
  color: #FFF;
  padding-bottom: 50px;
  flex: 1;
}

.collection__title {
  font-size: clamp(2.2rem, 4vw, 4.8rem);
  margin-bottom: 10px;
}

.collection__description {
  font-size: clamp(1.6rem, 2vw, 2.4rem);
  margin-bottom: 35px;
}

.collection__link {
  border: 1px solid #fff;
  display: inline-flex;
  align-items: center;
  padding: clamp(0.5rem, 1vw, 0.7rem) clamp(1rem, 1.5vw, 3.2rem);
  gap: clamp(1rem, 1.5vw, 2.5rem);
  justify-content: space-between;
  font-size: clamp(1.2rem, 2.5vw, 2.8rem);
  text-wrap: nowrap;
}

.collection__link svg {
  width: clamp(1.4rem, 2vw, 3.2rem);
  height: clamp(1.4rem, 2vw, 3.2rem);
}

.collection__link svg path {
  stroke: #FFF;
}

.collection__img {
  width: 100%;
  max-width: 888px;
  overflow: hidden;
  flex: 1;
}

.collection__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}