.portfolio1img {  /*max-width: 1230px;*/
  margin: 0 auto;padding: 20px 0;
}
.portfolio1img img {
  max-width: 100%; /* Изображение не превышает ширину блока */
  height: auto; /* Сохранение пропорций */
  display: block; /* Убирает лишние отступы вокруг изображения */
}
.textstyle {font-family: 'Roboto Condensed', sans-serif;
  font-weight: 200;
  font-size: 22px;
  line-height: 36px;
}

.portfolioText {
	
	/*max-width: 1230px;*/
  margin: 0 auto;
	padding: 20px 0;
	
	

}

.portfolio2img {
  display: flex;
  gap: 40px; /* Отступ между блоками */
  padding: 20px 0;
  /*max-width: 1230px;*/
  margin: 0 auto;
}
.box2img {
  flex: 1; /* Равномерное распределение пространства */
}
.box2img img {
  max-width: 100%; /* Изображение не превышает ширину блока */
  height: auto; /* Сохранение пропорций */
  display: block; /* Убирает лишние отступы вокруг изображения */
}

.portfolioTextImg {
  display: flex;
  align-items: flex-end; /* Выравнивание по нижнему краю */
  gap: 40px; /* Отступ между блоками */
  padding: 20px 0;
  /*max-width: 1230px;*/
  margin: 0 auto;
}
.boxTextImg {
  flex: 1; /* Равномерное распределение пространства */
}
.boxTextImg img {
  max-width: 100%; /* Изображение не превышает ширину блока */
  height: auto; /* Сохранение пропорций */
  display: block; /* Убирает лишние отступы вокруг изображения */
}

.portfolio4img {
  display: flex;
  gap: 40px; /* Отступ между блоками */
  padding: 20px 0;
  /*max-width: 1230px;*/
  margin: 0 auto;
}
.box4img {
  flex: 1; /* Равномерное распределение пространства */
}
.box4img img {
  max-width: 100%; /* Изображение не превышает ширину блока */
  height: auto; /* Сохранение пропорций */
  display: block; /* Убирает лишние отступы вокруг изображения */
}


@media (max-width: 1280px) {

.textstyle {font-family: 'Roboto Condensed', sans-serif;
  font-weight: 200;
  font-size: 18px;
  line-height: 32px;
}

}

@media (max-width: 500px) {
  .portfolio2img {
    flex-direction: column; /* Вертикальное расположение */
    gap: 40px; /* Отступ между блоками */
  }

  .portfolioTextImg {
    flex-direction: column; /* Вертикальное расположение */
    gap: 40px; /* Отступ между блоками */
    align-items: stretch; /* Растягивание блоков на всю ширину */
  }

  .portfolio4img {
    flex-direction: column; /* Вертикальное расположение */
    gap: 40px; /* Отступ между блоками */
  }
}





/* portfolio.html */










.portfolioList {
  display: flex;
  flex-wrap: wrap; /* Перенос элементов на новую строку */
  gap: 32px; /* Отступ между элементами */
  width: 100%; /* Растягиваем на 100% ширины */
  justify-content: flex-start; /* Выравнивание элементов по левому краю */
}

.portfolioItem {
  flex: 0 0 calc(25.2% - 32px); /* Фиксированная ширина с учетом отступов */
  box-sizing: border-box;
  text-decoration: none; /* Убираем подчеркивание у ссылок */
  color: inherit; /* Наследуем цвет текста */
  display: block; /* Делаем ссылку блочным элементом */
  max-width: calc(25.2% - 32px); /* Фиксированная ширина */
}

.portfolioItemImg {
  width: 100%; /* Ширина равна ширине родительского элемента */
  padding-top: 100%; /* Высота равна ширине (квадрат) */
  background-size: cover; /* Изображение заполняет блок */
  background-position: center; /* Центрирование изображения */
}

.portfolioItemDescription {
  margin: 20px 0;
  text-align: center;
}






@media (max-width: 1280px) {
	.portfolioList {
  gap: 12px; /* Отступ между элементами */
	}
  .portfolioItem {
    flex: 1 1 calc(25.2% - 12px); /* 4 элемента в строке с учетом отступов */
	  max-width: calc(25.2% - 12px); /* Фиксированная ширина для мобильных устройств */
  }
}

@media (max-width: 768px) {
    .portfolioItem {
    flex: 0 0 calc(50.7% - 12px); /* 2 элемента в строке на экранах меньше 768px */
    max-width: calc(50.7% - 12px); /* Фиксированная ширина для мобильных устройств */
  }

}



