/* =========================================================
   INSIDE KANGDE
========================================================= */

.kd-about-inside{
  width:100%;
  background:#FFFFFF;
  padding:72px 20px 78px;
  box-sizing:border-box;
}

.kd-about-inside *{
  box-sizing:border-box;
}


/* =========================================================
   CONTAINER
========================================================= */

.kd-about-container{
  width:100%;
  max-width:1320px;
  margin:0 auto;
}


/* =========================================================
   HEADER
========================================================= */

.kd-inside-header{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:60px;
  margin-bottom:42px;
}

.kd-inside-heading{
  max-width:760px;
}

.kd-about-eyebrow{
  font-family:Inter, Arial, sans-serif;
  font-size:13px;
  font-weight:700;
  letter-spacing:1.8px;
  line-height:1.4;
  color:#159A9C;
  margin-bottom:14px;
}

.kd-inside-heading h2{
  margin:0;
  font-family:Manrope, Inter, Arial, sans-serif;
  font-size:42px;
  font-weight:700;
  line-height:1.15;
  letter-spacing:-0.6px;
  color:#14213D;
}

.kd-inside-description{
  max-width:470px;
  font-family:Inter, Arial, sans-serif;
  font-size:15px;
  line-height:1.75;
  color:#69757E;
}


/* =========================================================
   IMAGE GALLERY
========================================================= */

.kd-inside-gallery{
  display:grid;

  grid-template-columns:
    minmax(0,1.55fr)
    minmax(0,.72fr)
    minmax(0,.72fr);

  grid-template-rows:
    minmax(250px,1fr)
    minmax(250px,1fr);

  gap:14px;
}


/* =========================================================
   MAIN IMAGE
========================================================= */

.kd-inside-main{
  position:relative;
  grid-row:1 / span 2;
  min-height:520px;
  overflow:hidden;
}

.kd-inside-main img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}


/* =========================================================
   SMALL IMAGES
========================================================= */

.kd-inside-item{
  position:relative;
  min-height:250px;
  overflow:hidden;
}

.kd-inside-item img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}


/* =========================================================
   CAPTION
========================================================= */

.kd-inside-caption{
  position:absolute;
  left:0;
  bottom:0;
  width:100%;

  padding:16px 18px;

  font-family:Inter, Arial, sans-serif;
  font-size:13px;
  font-weight:600;
  line-height:1.4;
  color:#FFFFFF;

  background:linear-gradient(
    to top,
    rgba(11,21,40,.72),
    rgba(11,21,40,0)
  );
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width:1100px){

  .kd-about-inside{
    padding:58px 20px 64px;
  }

  .kd-about-container{
    max-width:900px;
  }

  .kd-inside-header{
    gap:35px;
  }

  .kd-inside-heading h2{
    font-size:36px;
  }

  .kd-inside-gallery{

    grid-template-columns:
      minmax(0,1.4fr)
      minmax(0,.8fr);

    grid-template-rows:
      minmax(240px,1fr)
      minmax(240px,1fr)
      minmax(240px,1fr);

  }

  .kd-inside-main{
    grid-row:1 / span 2;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width:700px){

  .kd-about-inside{
    padding:50px 15px 55px;
  }

  .kd-inside-header{
    display:block;
    margin-bottom:28px;
  }

  .kd-inside-heading{
    max-width:none;
    margin-bottom:18px;
  }

  .kd-inside-heading h2{
    font-size:30px;
    line-height:1.2;
    letter-spacing:-0.3px;
  }

  .kd-inside-description{
    max-width:none;
    font-size:14px;
    line-height:1.7;
  }

  .kd-inside-gallery{

    display:grid;

    grid-template-columns:1fr;
    grid-template-rows:none;

    gap:12px;

  }

  .kd-inside-main{
    grid-row:auto;
    min-height:320px;
  }

  .kd-inside-item{
    min-height:240px;
  }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width:480px){

  .kd-about-inside{
    padding-left:12px;
    padding-right:12px;
  }

  .kd-inside-heading h2{
    font-size:27px;
  }

  .kd-inside-main{
    min-height:260px;
  }

  .kd-inside-item{
    min-height:210px;
  }

}