@import url('/static/css/contact-banner.css');

.portfolio-intro {
  padding-top: 58px;
  padding-bottom: 74px
}

.portfolio-intro h1 {
  position: relative;
  margin: 0 0 16px;
  font-size: clamp(48px, 5.5vw, 72px);
  line-height: .96
}

.portfolio-intro h1::after {
  display: block;
  width: 78px;
  height: 3px;
  margin-top: 18px;
  content: '';
  background: var(--wine)
}

.portfolio-intro>p {
  max-width: 590px;
  margin-top: 22px
}

.portfolio-intro .portfolio-list {
  margin-top: 42px
}

.portfolio-intro .portfolio-list>a {
  grid-template-columns: 144px minmax(0, 1fr) auto;
  gap: 22px;
  padding: 16px 0
}

.portfolio-intro .thumb {
  width: 144px;
  height: 92px;
  border-radius: 10px
}

.portfolio-intro .portfolio-list h2 {
  margin: 0;
  font-size: clamp(28px, 3.2vw, 38px);
  line-height: 1.02
}

.portfolio-intro .portfolio-list p {
  margin: 7px 0 0
}

.collection-intro {
  padding-top: 52px
}

.collection-intro .back {
  margin-bottom: 29px
}

.collection-intro h1 {
  max-width: 900px;
  margin: 0 0 14px;
  font-size: clamp(42px, 5vw, 66px);
  line-height: .98
}

.collection-intro>p {
  max-width: 650px;
  margin-top: 22px
}

.collection-intro .gallery {
  margin-top: 36px
}

.contacts-intro {
  padding-top: 58px;
  padding-bottom: 84px
}

.contacts-intro h1 {
  max-width: 790px;
  margin: 0;
  font-size: clamp(42px, 5vw, 67px);
  line-height: .98
}

.contacts-intro>p {
  max-width: 520px;
  margin: 29px 0 0;
  font-size: 15px;
  line-height: 1.7
}

.contact-grid.contacts-grid-compact {
  grid-template-columns: repeat(2, minmax(250px, 310px));
  justify-content: end;
  gap: 11px;
  margin-top: 46px
}

.contacts-stage .contact-grid.contacts-grid-compact {
  margin-top: 0
}

.contacts-grid-compact .contact-card {
  min-height: 92px;
  padding: 15px 16px;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  border-radius: 13px;
  background: rgba(255, 255, 255, .34);
  transition: transform .18s var(--ease), background .18s var(--ease), border-color .18s var(--ease)
}

.contacts-grid-compact .contact-card:hover {
  background: #fff;
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--wine) 45%, var(--line))
}

.contact-icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--wine)
}

.contact-icon svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round
}

.contact-icon--vk {
  font: 700 10px/1 var(--sans);
  letter-spacing: -.08em
}

.contact-detail {
  min-width: 0;
  text-align: right
}

.contact-detail h2 {
  margin: 0;
  font: 600 10px/1.1 var(--mono);
  letter-spacing: .06em;
  text-transform: uppercase
}

.contact-detail p {
  margin: 7px 0 0;
  overflow: hidden;
  color: var(--ink);
  font: 500 12px/1.28 var(--sans);
  text-overflow: ellipsis;
  white-space: nowrap
}

.contact-detail p:not(.contact-value--empty) {
  direction: ltr
}

@media(max-width:760px) {

  .portfolio-intro,
  .contacts-intro {
    padding-top: 43px
  }

  .portfolio-intro .portfolio-list>a {
    grid-template-columns: 88px minmax(0, 1fr) auto;
    gap: 13px
  }

  .portfolio-intro .thumb {
    width: 88px;
    height: 70px
  }

  .portfolio-intro .portfolio-list h2 {
    font-size: 27px
  }

  .portfolio-intro .portfolio-list p {
    font-size: 11px
  }

  .collection-intro h1,
  .contacts-intro h1 {
    font-size: 44px
  }

  .contact-grid.contacts-grid-compact {
    grid-template-columns: minmax(0, 310px);
    justify-content: stretch
  }

  .contacts-grid-compact .contact-card {
    width: 100%
  }
}