@charset "UTF-8";
article.project {
  padding-top: 30px;
  margin-bottom: 90px;
  background-color: #f9f9fd;
}
article.project hgroup {
  margin-bottom: 24px;
}
article.project hgroup h2 {
  font-size: 48px;
}
article.project hgroup p {
  color: var(--text-clr-black5);
  font-size: 21px;
  line-height: 1.44em;
}
article.project h3 {
  margin-bottom: 30px;
}
article.project .project-prime {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 102px;
  /* гибкая таблица скидываем для таблицы у минигалереи*/
}
article.project .project-prime .prime-fotos {
  width: 100%;
  height: auto;
  margin-bottom: 42px;
}
article.project .project-prime .prime-fotos .main-image {
  width: 100%;
  border: 1px solid #D9D9D9;
}
article.project .project-prime .prime-fotos .main-image img {
  width: 100%;
  height: auto;
}
article.project .project-prime .prime-fotos .thumbnails {
  display: flex;
  overflow-x: auto; /* Прокрутка */
  padding-bottom: 10px;
  list-style: none;
  padding: 0;
  margin: 0;
  margin-top: 15px;
  /* Убираем отступ у последней миниатюры */
}
article.project .project-prime .prime-fotos .thumbnails .thumbnail {
  flex: 0 0 calc(25% - 11.25px); /* Четыре превьюшки будут видны одновременно */
  margin-right: 15px;
  cursor: pointer;
  box-sizing: border-box;
  border: 1px solid #aaa; /* Бордер по умолчанию */
}
article.project .project-prime .prime-fotos .thumbnails .thumbnail img {
  width: 100%;
  height: 100%;
  display: block;
  -o-object-fit: cover;
     object-fit: cover; /* Подгоняем картинку под размер превью */
}
article.project .project-prime .prime-fotos .thumbnails .thumbnail.active {
  outline: 4px solid #D12846; /* Цветной бордер у активной картинки */
  outline-offset: -4px;
}
article.project .project-prime .prime-fotos .thumbnails .thumbnail:last-child {
  margin-right: 0;
}
article.project .project-prime .prime-info {
  max-width: 100%;
  width: 100%;
}
article.project .project-prime .prime-info table {
  width: 100%;
  border-spacing: 0px;
  border-collapse: collapse;
  font-size: 15px;
  line-height: 1.4em;
}
article.project .project-prime .prime-info table tr {
  vertical-align: text-top;
  border-bottom: 1px solid #e3e3ec;
}
article.project .project-prime .prime-info table tr:first-child td {
  padding-top: 0 !important;
}
article.project .project-prime .prime-info table td:nth-child(1) {
  min-width: 210px;
  width: 54%;
  padding-right: 12px;
  color: var(--text-clr-black6);
  padding-top: 8px;
  padding-bottom: 8px;
}
article.project .project-prime .prime-info table td:nth-child(2) {
  min-width: 120px;
  width: 46%;
  font-weight: 600;
  color: var(--text-clr-blue1);
  padding-top: 8px;
  padding-bottom: 8px;
}
article.project .project-prime .prime-info .dom-price {
  font-size: 24px;
  font-weight: 600;
  text-align: right;
  color: var(--text-clr-blue1);
  margin-top: 24px;
  margin-bottom: 24px;
}
article.project .project-prime .prime-info .btn-red {
  display: block;
  margin-left: auto; /* Прижимает кнопку к правому краю */
  max-width: 240px;
  width: 100%;
}
article.project .project-prime .flexible tr {
  display: block; /* Делает строку блочной */
  padding: 3px 0;
  border-bottom: 1px solid #e3e3ec;
}
article.project .project-prime .flexible td:nth-child(1) {
  display: block; /* Делает ячейки блочными, чтобы они располагались друг под другом */
  min-width: 100% !important;
  padding-top: 10px;
  padding-bottom: 3px !important;
}
article.project .project-prime .flexible td:nth-child(2) {
  display: block; /* Делает ячейки блочными, чтобы они располагались друг под другом */
  min-width: 100% !important;
  padding-top: 3px !important;
  padding-bottom: 10px;
}

.proj-menu {
  width: 100%;
  margin-top: 30px;
}

.tabs {
  list-style: none;
  padding: 0;
  margin: 0;
  display: none;
}

.tab {
  padding: 6px 6px;
  cursor: pointer;
  text-align: center;
  font-weight: bold;
  color: #153D31;
  border-bottom: 2px solid transparent;
  transition: border-bottom 0.3s;
}

.tab:hover {
  border-bottom: 2px solid #153D31;
}

.tab.active {
  border-bottom: 2px solid #D12846;
  color: #D12846;
}

.tab-content {
  padding: 30px 0 30px;
}
.tab-content h3 {
  margin-bottom: 24px;
}
.tab-content img {
  width: 100%;
  border: 1px solid #e3e3ec;
}

.tab-content.active {
  display: block;
}

/*****************/
@media (min-width: 480px) {
  article.project .project-prime .flexible tr {
    vertical-align: text-top;
    display: table-row;
    padding: 0;
    border-bottom: none;
    border-bottom: 1px solid #e3e3ec !important;
  }
  article.project .project-prime .flexible tr:first-child td {
    padding-top: 0;
  }
  article.project .project-prime .flexible td {
    color: var(--text-clr-black6);
  }
  article.project .project-prime .flexible td:nth-child(1) {
    display: table-cell; /* Возвращает стандартное поведение ячейки таблицы */
    width: auto; /* Убирает фиксированную ширину, позволяя таблице определять ее автоматически */
    padding-top: 8px;
    padding-bottom: 8px;
    min-width: 210px;
    width: 54%;
    padding-right: 12px;
  }
  article.project .project-prime .flexible td:nth-child(2) {
    display: table-cell; /* Возвращает стандартное поведение ячейки таблицы */
    width: auto; /* Убирает фиксированную ширину, позволяя таблице определять ее автоматически */
    padding-top: 8px;
    padding-bottom: 8px;
    min-width: 120px;
    width: 46%;
  }
}
@media (min-width: 801px) {
  article.project .project-prime {
    flex-direction: row;
    justify-content: space-between;
  }
  article.project .project-prime .prime-fotos {
    width: 100%;
    max-width: 540px;
    flex-basis: auto;
    margin-bottom: 0;
  }
  article.project .project-prime .prime-info {
    max-width: 429px;
    width: 100%;
    margin-left: 51px;
  }
  .proj-menu {
    width: 100%;
    margin-top: 30px;
  }
  .tabs {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: space-around;
    max-width: 810px;
  }
  .tab-content {
    display: none;
    height: unset;
  }
  .tab-content h3 {
    display: none;
  }
  .tab-content img {
    width: auto;
  }
  .tab-content.active {
    display: block;
  }
}
@media (min-width: 1024px) {
  article.project .project-prime .prime-fotos {
    max-width: 690px;
  }
  article.project .project-prime .prime-info {
    margin-left: 78px;
  }
}/*# sourceMappingURL=project.css.map */