@import './card-component.css';

/* 카드 레이아웃 */
.ipad-pro .image-placeholder {
  background-image: url('/src/apple/products/ipad_pro.jpeg');
}

.c-product-showcase.ipad-air {
  background-color: #f7f9fa;
  color: var(--black);
}
.ipad-air .btn-primary {
  background-color: var(--black);
  color: var(--white);
}
.ipad-air .btn-secondary {
  border: 1px solid var(--black);
  color: var(--black);
}
.ipad-air .image-placeholder {
  background-image: url('/src/apple/products/ipad_air.jpeg');
}

.c-product-showcase.macbook-air,
.c-product-showcase.iphone-15 {
  background-color: var(--white);
  color: var(--black);
}
.macbook-air .btn-primary,
.iphone-15 .btn-primary {
  background-color: var(--black);
  color: var(--white);
}
.macbook-air .btn-secondary,
.iphone-15 .btn-secondary {
  border: 1px solid var(--black);
  color: var(--black);
}
.macbook-air .btn-secondary:hover,
.iphone-15 .btn-secondary:hover {
  background-color: var(--black);
  color: var(--white);
}
.macbook-air .image-placeholder {
  background-image: url('/src/apple/products/macbook_air.jpeg');
}
.iphone-15 .image-placeholder {
  background-image: url('/src/apple/products/iphone15.jpeg');
}

.iphone-15-pro .image-placeholder {
  background-image: url('/src/apple/products/iphone15_pro.jpeg');
}
.watch .image-placeholder {
  background-image: url('/src/apple/products/apple_watch.jpeg');
}
.airpods-pro .image-placeholder {
  background-image: url('/src/apple/products/airpods_pro.jpeg');
}

@media (min-width: 1024px) {
  .ipad-pro .image-placeholder {
    background-image: url('/src/apple/products/ipad_pro_wide.jpeg');
  }
  .ipad-air .image-placeholder {
    background-image: url('/src/apple/products/ipad_air_wide.jpeg');
  }
  .iphone-15-pro .image-placeholder {
    background-image: url('/src/apple/products/iphone15_pro_wide.jpeg');
  }
  .iphone-15 .image-placeholder {
    background-image: url('/src/apple/products/iphone15.jpeg');
  }
  .watch .image-placeholder {
    background-image: url('/src/apple/products/apple_watch.jpeg');
  }
  .macbook-air .image-placeholder {
    background-image: url('/src/apple/products/macbook_air.jpeg');
  }
  .airpods-pro .image-placeholder {
    background-image: url('/src/apple/products/airpods_pro.jpeg');
  }

  @media only screen and (min-resolution: 1.5dppx), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) {
    .ipad-pro .image-placeholder {
      background-image: url('/src/apple/products/ipad_pro_2x.jpeg');
    }
    .ipad-air .image-placeholder {
      background-image: url('/src/apple/products/ipad_air_wide_2x.jpeg');
    }
    .iphone-15-pro .image-placeholder {
      background-image: url('/src/apple/products/iphone15_pro_wide_2x.jpeg');
    }
    .iphone-15 .image-placeholder {
      background-image: url('/src/apple/products/iphone15_2x.jpeg');
    }
    .watch .image-placeholder {
      background-image: url('/src/apple/products/apple_watch_2x.jpeg');
    }
    .macbook-air .image-placeholder {
      background-image: url('/src/apple/products/macbook_air_2x.jpeg');
    }
    .airpods-pro .image-placeholder {
      background-image: url('/src/apple/products/airpods_pro_2x.jpeg');
    }
  }
}