/* ==========================================================================
   "Neden Dekoinox Paslanmaz?" section
   ========================================================================== */

.about {
  position: relative;
  padding: 0 20px 40px;
  background: #f4f4f4;
}

.about__media { margin: 0 -20px 28px; height: 190px; overflow: hidden; background: #cfcfd1; }
.about__media img { width: 100%; height: 100%; object-fit: cover; }

.about__title { margin-top: 12px; font-size: 30px; font-weight: 700; line-height: 1.15; letter-spacing: 0; color: #1e1e20; }
.about__title span { display: block; }
.about__title-accent { color: var(--c-brown); }
.about__body { margin-top: 20px; }
.about__body p { font-size: 15px; line-height: 1.65; color: #2c2c2e; }
.about__body .btn { margin-top: 22px; }

.about__features { display: grid; gap: 0; margin-top: 28px; border-top: 1px solid #d9d9d9; }
.about__features li { display: flex; align-items: center; gap: 14px; padding: 14px 0; font-size: 15px; font-weight: 600; border-bottom: 1px solid #d9d9d9; }
.about__features .icon { font-size: 30px; color: #d9601a; stroke-width: 1.5; }

/* ==========================================================================
   Desktop
   ========================================================================== */
@media (min-width: 992px) {
  .about {
    height: 16.2rem;
    margin-top: 2.4rem;
    padding: 0;
    background: linear-gradient(90deg, #f1f1f1 0%, #f6f6f6 40%, #f6f6f6 100%);
  }

  .about__media {
    position: absolute;
    left: 0;
    top: 0;
    width: 23.6rem;
    height: 16.2rem;
    margin: 0;
    background: #bfc0c2;
    clip-path: polygon(0 0, 100% 0, calc(100% - 3rem) 100%, 0 100%);
  }
  .about__media img { object-position: left top; }

  .about__intro { position: absolute; left: 26.6rem; top: 2.4rem; }
  .about__intro .section-label { padding: 0; font-size: .95rem; letter-spacing: .2em; font-weight: 600; color: #b8501a; }
  .about__title { margin-top: 1.1rem; font-size: 2.35rem; line-height: 2.65rem; letter-spacing: 0; }

  .about__body { position: absolute; left: 47.4rem; top: 3.4rem; width: 28rem; margin: 0; }
  .about__body p { font-size: 1.04rem; line-height: 1.38rem; letter-spacing: 0; color: #2a2a2c; }
  .about__body .btn {
    margin-top: 1.6rem;
    min-height: 2.6rem;
    padding: 0 1.8rem;
    font-size: 1.02rem;
    border-radius: .35rem;
    background: linear-gradient(180deg, #d4601c 0%, #b04a12 100%);
  }

  .about__features {
    position: absolute;
    left: 78.4rem;
    right: 5.8rem;
    top: 2.6rem;
    margin: 0;
    border-top: 0;
  }
  .about__features li {
    gap: 1.6rem;
    padding: 0;
    height: 3.3rem;
    font-size: 1.02rem;
    line-height: 1.3rem;
    font-weight: 600;
    letter-spacing: 0;
    border-bottom: 1px solid #dcdcdc;
  }
  .about__features li:first-child { height: 3.9rem; }
  .about__features li:last-child { border-bottom: 0; }
  .about__features .icon { width: 3rem; font-size: 2.6rem; color: #d9601a; stroke-width: 1.4; }

  /* slanted divider between the paragraph and the feature list */
  .about::after {
    content: '';
    position: absolute;
    left: 77.5rem;
    top: 2.6rem;
    height: 11.5rem;
    border-left: 1px solid #e0a98d;
    transform: skewX(-9deg);
  }
}