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

/* 카드 레이아웃 */
.apple-layout {
  height: var(--size);
  display: grid;
  grid-template-columns: 1fr;

  @media (width>= 1024px) {
    grid-template-columns: 1fr 1fr;
    .ipad-pro,
    .ipad-air,
    .iphone-15-pro {
      grid-column: 1/3;
    }
  }

  @media only screen and (min-resolution: 2dppx), only screen and (-webkit-min-device-pixel-ratio: 2) {
    .ipad-pro {
      background: url(../products/ipad_pro_2x.jpeg) no-repeat;
      background-position: center;
      background-size: cover;
      @media (width>= 1024px) {
        background: url(../products/ipad_pro_wide_2x.jpeg) no-repeat;
        background-position: center;
        background-size: cover;
      }
    }
    .ipad-air {
      background: url(../products/ipad_air_2x.jpeg) no-repeat;
      background-position: center;
      background-size: cover;
    }
    .iphone-15-pro {
      background: url(../products/iphone15_pro_2x.jpeg) no-repeat;
      background-position: center;
      background-size: cover;
      @media (width>= 1024px) {
        background: url(../products/iphone15_pro_wide_2x.jpeg) no-repeat;
        background-position: center;
        background-size: cover;
      }
    }
    .iphone-15 {
      background: url(../products/iphone15_2x.jpeg) no-repeat;
      background-position: center;
      background-size: cover;
    }
    .MacBook-Air {
      background: url(../products/macbook_air_2x.jpeg) no-repeat;
      background-position: center;
      background-size: cover;
    }
    .WATCH {
      background: url(../products/apple_watch_2x.jpeg) no-repeat;
      background-position: center;
      background-size: cover;
    }
    .airPods-Pro {
      background: url(../products/airpods_pro_2x.jpeg) no-repeat;
      background-position: center;
      background-size: cover;
    }
  }
}