/* -------------------------------- 

File#: _2_device-group
Title: Device Group
Descr: A group of devices
Usage: codyhouse.co/license

-------------------------------- */
.device-group-1 {
  position: relative;
  z-index: 1;
  display: grid;
  align-items: center;
  grid-template-columns: repeat(10, 1fr);
}
.device-group-1 > * {
  position: relative;
  grid-row: 1/-1;
}
.device-group-1 > *:nth-child(1), .device-group-1 > *:nth-child(3) {
  z-index: 1;
}
.device-group-1 > *:nth-child(1) {
  grid-column: 1/5;
}
.device-group-1 > *:nth-child(2) {
  z-index: 2;
  grid-column: 4/8;
}
.device-group-1 > *:nth-child(3) {
  grid-column: 7/11;
}
.device-group-1 .dev-phone-3d-wrapper {
  -webkit-perspective: 1000px;
          perspective: 1000px;
}
.device-group-1 .dev-phone-3d-wrapper:first-child .dev-phone,
.device-group-1 .dev-phone-3d-wrapper:last-child .dev-phone {
  transition: -webkit-transform 0.5s;
  transition: transform 0.5s;
  transition: transform 0.5s, -webkit-transform 0.5s;
}
.device-group-1 .dev-phone-3d-wrapper:first-child .dev-phone {
  -webkit-transform: rotateY(30deg);
          transform: rotateY(30deg);
  -webkit-transform-origin: left center;
          transform-origin: left center;
}
.device-group-1 .dev-phone-3d-wrapper:last-child .dev-phone {
  -webkit-transform: rotateY(-30deg);
          transform: rotateY(-30deg);
  -webkit-transform-origin: right center;
          transform-origin: right center;
}
.device-group-1:hover .dev-phone-3d-wrapper:first-child .dev-phone {
  -webkit-transform: rotateY(20deg);
          transform: rotateY(20deg);
}
.device-group-1:hover .dev-phone-3d-wrapper:last-child .dev-phone {
  -webkit-transform: rotateY(-20deg);
          transform: rotateY(-20deg);
}

.device-group-2 {
  position: relative;
  z-index: 1;
  display: grid;
  align-items: end;
  grid-template-columns: repeat(12, 1fr);
  padding-bottom: 2.5%;
}
.device-group-2 > * {
  position: relative;
  grid-row: 1/-1;
}
.device-group-2 .dev-phone {
  z-index: 2;
  grid-column: 1/4;
  bottom: -5%;
}
.device-group-2 .dev-laptop {
  z-index: 1;
  grid-column: 2/13;
}

.device-group-3 {
  position: relative;
  z-index: 1;
  display: grid;
  align-items: end;
  grid-template-columns: repeat(12, 1fr);
  padding-bottom: 3.75%;
}
.device-group-3 > * {
  position: relative;
  grid-row: 1/-1;
}
.device-group-3 .dev-phone {
  z-index: 2;
  grid-column: 1/4;
  bottom: -5%;
}
.device-group-3 .dev-desktop {
  z-index: 1;
  grid-column: 2/13;
}

.device-group-4 {
  position: relative;
  z-index: 1;
  display: grid;
  align-items: end;
  grid-template-columns: repeat(12, 1fr);
  padding-bottom: 2.75%;
}
.device-group-4 > * {
  position: relative;
  grid-row: 1/-1;
}
.device-group-4 .dev-phone {
  z-index: 2;
  grid-column: 1/3;
  bottom: -5%;
}
.device-group-4 .dev-desktop {
  z-index: 1;
  grid-column: 2/10;
}
.device-group-4 .dev-laptop {
  z-index: 2;
  bottom: -5%;
  grid-column: 6/13;
}