@use '../base' as *;
@use '_1_devices.scss' as *;

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

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

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

// 3 phones
.device-group-1 {
  position: relative;
  z-index: 1;
  display: grid;
  align-items: center;
  grid-template-columns: repeat(10, 1fr);

  > * {
    position: relative;
    grid-row: 1 / -1;
  }

  > *:nth-child(1), > *:nth-child(3) {
    z-index: 1;
  }

  > *:nth-child(1) {
    grid-column: 1 / 5;
  }

  > *:nth-child(2) {
    z-index: 2;
    grid-column: 4 / 8;
  }

  > *:nth-child(3) {
    grid-column: 7 / 11;
  }

  .dev-phone-3d-wrapper {
    perspective: 1000px;
  }

  .dev-phone-3d-wrapper:first-child .dev-phone, 
  .dev-phone-3d-wrapper:last-child .dev-phone {
    transition: transform .5s;
  }

  .dev-phone-3d-wrapper:first-child .dev-phone {
    transform: rotateY(30deg);
    transform-origin: left center;
  }

  .dev-phone-3d-wrapper:last-child .dev-phone {
    transform: rotateY(-30deg);
    transform-origin: right center;
  }

  &:hover {
    .dev-phone-3d-wrapper:first-child .dev-phone {
      transform: rotateY(20deg);
    }
  
    .dev-phone-3d-wrapper:last-child .dev-phone {
      transform: rotateY(-20deg);
    }
  }
}

// phone + laptop
.device-group-2 {
  position: relative;
  z-index: 1;
  display: grid;
  align-items: end;
  grid-template-columns: repeat(12, 1fr);
  padding-bottom: 2.5%;

  > * {
    position: relative;
    grid-row: 1 / -1;
  }

  .dev-phone {
    z-index: 2;
    grid-column: 1 / 4;
    bottom: -5%;
  }

  .dev-laptop {
    z-index: 1;
    grid-column: 2 / 13;
  }
}

// phone + desktop
.device-group-3 {
  position: relative;
  z-index: 1;
  display: grid;
  align-items: end;
  grid-template-columns: repeat(12, 1fr);
  padding-bottom: 3.75%;

  > * {
    position: relative;
    grid-row: 1 / -1;
  }

  .dev-phone {
    z-index: 2;
    grid-column: 1 / 4;
    bottom: -5%;
  }

  .dev-desktop {
    z-index: 1;
    grid-column: 2 / 13;
  }
}

// phone + desktop + laptop
.device-group-4 {
  position: relative;
  z-index: 1;
  display: grid;
  align-items: end;
  grid-template-columns: repeat(12, 1fr);
  padding-bottom: 2.75%;

  > * {
    position: relative;
    grid-row: 1 / -1;
  }

  .dev-phone {
    z-index: 2;
    grid-column: 1 / 3;
    bottom: -5%;
  }

  .dev-desktop {
    z-index: 1;
    grid-column: 2 / 10;
  }

  .dev-laptop {
    z-index: 2;
    bottom: -5%;
    grid-column: 6 / 13;
  }
}