.portfolio-section {
  padding: 5rem 0;
  background: #f9f9f9;
}
.portfolio-section .section-title {
  text-align: center;
  font-size: 2rem;
  margin-bottom: 1rem;
}
.portfolio-section .section-title span {
  display: inline-block;
  animation: letterWave 0.5s ease-out forwards;
}
.portfolio-section .section-description {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 3rem;
}

.portfolio-wrapper {
  display: flex;
  gap: 2rem;
  justify-content: flex-start;
  flex-wrap: nowrap;
  padding: 0 50px;
  box-sizing: border-box;
}
.iframe-wrapper {
  flex-shrink: 0;
  width: 600px;
  height: 400px;
  overflow: auto;
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.1);
  position: relative;
  background: #fff;
  box-sizing: border-box;
}
.iframe-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* или contain — если важно видеть сайт целиком */
  display: block;
}


.iframe-card {
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 20px; /* увеличенное скругление */
  box-shadow: 0 5px 15px rgba(0,0,0,0.05); /* базовая тень */
  border: 5px solid rgba(255, 140, 0, 0.8); /* более оранжевая рамка */
  position: relative;
  background: #fff;
  transition: box-shadow 0.3s ease, transform 0.3s ease; /* только hover эффекты */
}

.iframe-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 25px rgba(0,0,0,0.15); /* тень на hover */
}

.iframe-card iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 1200px;
  height: 800px;
  transform: scale(0.5);
  transform-origin: top left;
  border: none;
  pointer-events: none;
}

/* ПК ≥1400px — два сайта */
@media (min-width: 1400px) {
  .portfolio-wrapper { flex-direction: row; flex-wrap: nowrap; }
  .iframe-wrapper { width: 600px; height: 400px; }
  .iframe-wrapper iframe { transform: scale(0.5); }
}

/* 1300–1399px — один сайт, масштаб 2× */
@media (min-width: 1300px) and (max-width: 1399px) {
  .portfolio-wrapper { flex-direction: column; align-items: center; gap: 2rem; }
  .iframe-wrapper { width: 1200px; height: 800px; }
  .iframe-wrapper iframe { transform: scale(1); }
}

/* 1000–1299px — один сайт, масштаб 1.5× */
@media (min-width: 1000px) and (max-width: 1299px) {
  .portfolio-wrapper { flex-direction: column; align-items: center; gap: 2rem; }
  .iframe-wrapper { width: 900px; height: 600px; }
  .iframe-wrapper iframe { transform: scale(0.75); }
}

/* 801–999px — один сайт, масштаб 1.25× */
@media (min-width: 801px) and (max-width: 999px) {
  .portfolio-wrapper { flex-direction: column; align-items: center; gap: 2rem; }
  .iframe-wrapper { width: 750px; height: 500px; }
  .iframe-wrapper iframe { transform: scale(0.625); }
}

/* 675–800px — один сайт, масштаб 1× */
@media (min-width: 675px) and (max-width: 800px) {
  .portfolio-wrapper { flex-direction: column; align-items: center; gap: 2rem; }
  .iframe-wrapper { width: 600px; height: 400px; }
  .iframe-wrapper iframe { transform: scale(0.5); }
}

/* 600–674px — один сайт, масштаб 0.8× */
@media (min-width: 600px) and (max-width: 674px) {
  .portfolio-wrapper { flex-direction: column; align-items: center; gap: 2rem; }
  .iframe-wrapper { width: 480px; height: 320px; }
  .iframe-wrapper iframe { transform: scale(0.4); }
}

/* 525–599px — один сайт, масштаб 0.7× */
@media (min-width: 525px) and (max-width: 599px) {
  .portfolio-wrapper { flex-direction: column; align-items: center; gap: 2rem; }
  .iframe-wrapper { width: 420px; height: 280px; }
  .iframe-wrapper iframe { transform: scale(0.35); }
}

/* 460–524px — один сайт, масштаб 0.6× */
@media (min-width: 460px) and (max-width: 524px) {
  .portfolio-wrapper { flex-direction: column; align-items: center; gap: 2rem; }
  .iframe-wrapper { width: 360px; height: 240px; }
  .iframe-wrapper iframe { transform: scale(0.3); }
}

/* 400–459px — один сайт, масштаб 0.55× */
@media (min-width: 400px) and (max-width: 459px) {
  .portfolio-wrapper { flex-direction: column; align-items: center; gap: 2rem; }
  .iframe-wrapper { width: 330px; height: 220px; }
  .iframe-wrapper iframe { transform: scale(0.275); }
}

/* <400px — один сайт, масштаб 0.5× */
@media (max-width: 399px) {
  .portfolio-wrapper { flex-direction: column; align-items: center; gap: 2rem; }
  .iframe-wrapper { width: 300px; height: 200px; }
  .iframe-wrapper iframe { transform: scale(0.25); }
}

/* Отступ между рядами портфолио */
.portfolio-wrapper + .portfolio-wrapper {
  margin-top: 2rem; /* регулируй по вкусу */
}