/* ========================================
   360° COMFORT - PAGE SPECIFIC STYLES
   ======================================== */

/* ========================================
   PAGE BACKGROUND
   ======================================== */

.tech-page--comfort {
  background-image: url(/assets/images/frame-1321317546-1.png);
}

/* ========================================
   COMFORT ICON ASSEMBLY
   ======================================== */

.comfort-icon {
  width: 393px;
  height: 408px;
  position: relative;
}

.comfort-icon__assembly {
  position: relative;
  width: 100%;
  height: 100%;
}

/* Icon Parts Positioning */
.comfort-icon__part {
  position: absolute;
}

.comfort-icon__part--main {
  width: 225px;
  height: 240px;
  top: 82px;
  left: 98px;
}

.comfort-icon__part--accent-1 {
  width: 43px;
  height: 66px;
  top: 226px;
  left: 52px;
}

.comfort-icon__part--accent-2 {
  width: 59px;
  height: 67px;
  top: 109px;
  left: 46px;
}

.comfort-icon__part--accent-3 {
  width: 62px;
  height: 66px;
  top: 184px;
  left: 290px;
}

.comfort-icon__part--line-1 {
  width: 60px;
  height: 18px;
  top: 144px;
  left: 272px;
}

.comfort-icon__part--line-2 {
  width: 60px;
  height: 19px;
  top: 105px;
  left: 272px;
}

.comfort-icon__part--line-3 {
  width: 60px;
  height: 17px;
  top: 126px;
  left: 272px;
}

.comfort-icon__part--bottom {
  width: 241px;
  height: 80px;
  top: 328px;
  left: 78px;
}

.comfort-icon__part--sub {
  width: 165px;
  height: 57px;
  top: 0;
  left: 128px;
}

.comfort-icon__part--side-left {
  width: 109px;
  height: 310px;
  top: 39px;
  left: 0;
}

.comfort-icon__part--side-right {
  width: 109px;
  height: 310px;
  top: 39px;
  left: 284px;
}

/* ========================================
   GALLERY BACKGROUNDS
   ======================================== */

.tech-gallery__main--comfort {
  background-image: url(/assets/images/frame-1321317580-1.png);
}

.tech-gallery__item--comfort-1 {
  background-image: url(/assets/images/frame-1321317582-2@2x.png);
}

.tech-gallery__item--comfort-2 {
  background-image: url(/assets/images/frame-1321317587-1@2x.png);
}

.tech-gallery__item--comfort-3 {
  background-image: url(/assets/images/frame-1321317589-1@2x.png);
}

/* ========================================
   RESPONSIVE ADJUSTMENTS
   ======================================== */

@media (max-width: 768px) {
  .comfort-icon {
    width: 280px;
    height: 300px;
  }

  .comfort-icon__part--main {
    width: 160px;
    height: 170px;
    top: 58px;
    left: 70px;
  }

  .comfort-icon__part--accent-1 {
    width: 31px;
    height: 47px;
    top: 161px;
    left: 37px;
  }

  .comfort-icon__part--accent-2 {
    width: 42px;
    height: 48px;
    top: 78px;
    left: 33px;
  }

  .comfort-icon__part--accent-3 {
    width: 44px;
    height: 47px;
    top: 131px;
    left: 207px;
  }

  .comfort-icon__part--line-1 {
    width: 43px;
    height: 13px;
    top: 103px;
    left: 194px;
  }

  .comfort-icon__part--line-2 {
    width: 43px;
    height: 14px;
    top: 75px;
    left: 194px;
  }

  .comfort-icon__part--line-3 {
    width: 43px;
    height: 12px;
    top: 90px;
    left: 194px;
  }

  .comfort-icon__part--bottom {
    width: 172px;
    height: 57px;
    top: 234px;
    left: 56px;
  }

  .comfort-icon__part--sub {
    width: 118px;
    height: 41px;
    top: 0;
    left: 91px;
  }

  .comfort-icon__part--side-left {
    width: 78px;
    height: 221px;
    top: 28px;
    left: 0;
  }

  .comfort-icon__part--side-right {
    width: 78px;
    height: 221px;
    top: 28px;
    left: 202px;
  }
}

@media (max-width: 480px) {
  .comfort-icon {
    width: 200px;
    height: 214px;
  }

  .comfort-icon__part--main {
    width: 114px;
    height: 122px;
    top: 42px;
    left: 50px;
  }

  .comfort-icon__part--accent-1 {
    width: 22px;
    height: 34px;
    top: 115px;
    left: 26px;
  }

  .comfort-icon__part--accent-2 {
    width: 30px;
    height: 34px;
    top: 56px;
    left: 23px;
  }

  .comfort-icon__part--accent-3 {
    width: 32px;
    height: 34px;
    top: 94px;
    left: 148px;
  }

  .comfort-icon__part--line-1 {
    width: 31px;
    height: 9px;
    top: 73px;
    left: 139px;
  }

  .comfort-icon__part--line-2 {
    width: 31px;
    height: 10px;
    top: 54px;
    left: 139px;
  }

  .comfort-icon__part--line-3 {
    width: 31px;
    height: 9px;
    top: 64px;
    left: 139px;
  }

  .comfort-icon__part--bottom {
    width: 123px;
    height: 41px;
    top: 167px;
    left: 40px;
  }

  .comfort-icon__part--sub {
    width: 84px;
    height: 29px;
    top: 0;
    left: 65px;
  }

  .comfort-icon__part--side-left {
    width: 56px;
    height: 158px;
    top: 20px;
    left: 0;
  }

  .comfort-icon__part--side-right {
    width: 56px;
    height: 158px;
    top: 20px;
    left: 144px;
  }
}