.article-portfolio {
  margin-top: 20px;
}
@media (min-width: 1200px) {
  .article-portfolio {
    margin-top: 40px;
  }
}

.article-portfolio__header {
  margin-bottom: clamp(33.333px, 11.111vw, 60px);
  overflow: hidden;
}
@media (min-width: 700px) {
  .article-portfolio__header {
    margin-bottom: 60px;
  }
}

.article-portfolio__detail-picture {
  width: clamp(280px, 93.3333333333vw, 653.3333333333px);
  max-height: 229px;
  aspect-ratio: 336/229;
}
@media (min-width: 700px) {
  .article-portfolio__detail-picture {
    width: clamp(663.5416666667px, 94.7916666667vw, 1137.5px);
    max-height: 496px;
    aspect-ratio: 728/496;
  }
}
@media (min-width: 1200px) {
  .article-portfolio__detail-picture {
    width: max(1133.3333333333px, 94.4444444444vw);
    max-width: 1360px;
    max-height: 925px;
    aspect-ratio: 1360/925;
  }
}
.article-portfolio__detail-picture img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}

.article-portfolio__content {
  margin-bottom: clamp(33.333px, 11.111vw, 60px);
}
@media (min-width: 700px) {
  .article-portfolio__content {
    margin-bottom: 60px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

.article-portfolio__title {
  margin-bottom: 40px;
}

.article-portfolio__content-block {
  overflow: hidden;
}
.article-portfolio__content-block:last-child {
  margin-bottom: clamp(100px, 33.333vw, 127px);
}
@media (min-width: 700px) {
  .article-portfolio__content-block:last-child {
    margin-bottom: clamp(127px, 18.229vw, 160px);
  }
}
@media (min-width: 1200px) {
  .article-portfolio__content-block:last-child {
    margin-bottom: 160px;
  }
}

.article-portfolio__block-list {
  margin-bottom: 10px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  overflow: hidden;
}
@media (min-width: 700px) {
  .article-portfolio__block-list {
    margin-bottom: 20px;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

.article-portfolio__block-item {
  width: clamp(280px, 93.3333333333vw, 653.3333333333px);
  max-height: 336px;
  aspect-ratio: 336/336;
}
@media (min-width: 700px) {
  .article-portfolio__block-item {
    width: clamp(322.65625px, 46.09375vw, 553.125px);
    max-height: 354px;
    aspect-ratio: 354/354;
  }
}
@media (min-width: 1200px) {
  .article-portfolio__block-item {
    width: max(558.3333333333px, 46.5277777778vw);
    max-width: 670px;
    max-height: 670px;
    aspect-ratio: 670/670;
  }
}
.article-portfolio__block-item img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}

.article-portfolio__text-block {
  margin: clamp(33.333px, 11.111vw, 60px) 0;
}
@media (min-width: 700px) {
  .article-portfolio__text-block {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}
@media (min-width: 1200px) {
  .article-portfolio__text-block {
    margin: 60px 0;
  }
}

@media (min-width: 700px) {
  .--column {
    grid-column: 2/3;
  }
}

.article-portfolio__big-src {
  width: clamp(280px, 93.3333333333vw, 653.3333333333px);
  margin-bottom: 10px;
}
@media (min-width: 700px) {
  .article-portfolio__big-src {
    width: clamp(663.5416666667px, 94.7916666667vw, 1137.5px);
    margin-bottom: 20px;
  }
}
@media (min-width: 1200px) {
  .article-portfolio__big-src {
    width: clamp(1133.3333333333px, 94.4444444444vw, 1511.1111111111px);
    max-width: 1360px;
  }
}
.article-portfolio__big-src img {
  width: 100%;
  height: auto;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}

.--content h1, .--content h2, .--content h3 {
  margin-bottom: clamp(10px, 3.333vw, 25px);
  line-height: 1.4;
}
@media (min-width: 700px) {
  .--content h1, .--content h2, .--content h3 {
    margin-bottom: 25px;
  }
}
.--content p {
  margin-bottom: 20px;
}
.--content *:last-child {
  margin-bottom: 0;
}

.article-portfolio__aside-title {
  margin-bottom: 40px;
}
@media (min-width: 700px) {
  .article-portfolio__aside-title {
    margin-bottom: 60px;
  }
}