.materials-section {
  padding: 110px max(6vw, 32px);
  background: #fff;
}

.fabric-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
  margin-bottom: 100px;
}

.fabric-grid article {
  padding: 30px;
  background: #f3f7fa;
  border-top: 4px solid #5797C7;
}

.fabric-grid span {
  color: #5797C7;
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .14em;
}

.fabric-grid h3 {
  margin: 18px 0 12px;
  color: #082640;
  font-family: Montserrat, sans-serif;
  font-size: 1.35rem;
}

.fabric-grid p {
  margin: 0;
  color: #607080;
}

.portfolio-heading {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  align-items: end;
  gap: 50px;
  margin-bottom: 42px;
}

.portfolio-heading h2 {
  margin: 0;
  color: #082640;
  font-family: Montserrat, sans-serif;
  font-size: clamp(2rem, 4vw, 3.7rem);
  line-height: 1.08;
  letter-spacing: -.035em;
}

.portfolio-heading > p {
  margin: 0;
  color: #607080;
  font-size: 1.05rem;
}

.shirt-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.shirt-gallery figure {
  margin: 0;
  overflow: hidden;
  background: #fff;
  border: 1px solid #d8e4ed;
  border-radius: 4px;
  box-shadow: 0 14px 35px rgba(8, 38, 64, .08);
}

.shirt-gallery img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center;
  background: #fff;
  transition: transform .3s ease;
}

.shirt-gallery figure:hover img { transform: scale(1.025); }

.shirt-gallery figcaption {
  display: grid;
  gap: 3px;
  padding: 16px 18px 18px;
}

.shirt-gallery b {
  color: #082640;
  font-size: .95rem;
}

.shirt-gallery span {
  color: #607080;
  font-size: .82rem;
}

.jacket-showcase {
  margin: 28px 0 0;
  overflow: hidden;
  background: #fff;
  border: 1px solid #d8e4ed;
  border-radius: 4px;
  box-shadow: 0 18px 45px rgba(8, 38, 64, .1);
}

.jacket-showcase img {
  display: block;
  width: 100%;
  height: auto;
  background: #fff;
}

.jacket-showcase figcaption {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 18px 22px 20px;
}

.jacket-showcase b {
  color: #082640;
  font-size: 1rem;
}

.jacket-showcase span {
  color: #607080;
  font-size: .88rem;
}

.portfolio-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 25px;
  margin-top: 42px;
  padding: 28px 32px;
  background: #eaf2f8;
  border-left: 4px solid #5797C7;
}

.portfolio-cta p {
  margin: 0;
  color: #082640;
  font-family: Montserrat, sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
}

@media (max-width: 980px) {
  .fabric-grid { grid-template-columns: 1fr; margin-bottom: 75px; }
  .portfolio-heading { grid-template-columns: 1fr; gap: 18px; }
  .shirt-gallery { grid-template-columns: repeat(2, 1fr); }
  .portfolio-cta { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 620px) {
  .materials-section { padding: 76px 22px; }
  .fabric-grid article { padding: 28px; }
  .shirt-gallery { grid-template-columns: 1fr; }
  .jacket-showcase { overflow-x: auto; }
  .jacket-showcase img { width: 860px; max-width: none; }
  .jacket-showcase figcaption { position: sticky; left: 0; width: calc(100vw - 44px); align-items: flex-start; flex-direction: column; gap: 4px; }
  .portfolio-cta { padding: 24px; }
}