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

/* 카드 레이아웃 */
.maincontainer {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1rem;
  .ui-component {
    grid-column: span 12;
  }
  .iPhone-Pro{
    grid-column: 1 / span 7;
    grid-row: 1;
  }
  .iPhone{
    grid-column: 8 / span 5;
    grid-row: 1;
  }
  .iPad-Pro{
    grid-column: 6 / span 7;
    grid-row: 2;
  }
  .iPad-Air{
    grid-column: 1 / span 5;
    grid-row: 2;
  }
  .watch{
    grid-column: 7 / 13;
    grid-row: 4;
}
.macBook-Air{
    grid-column: 1 / span 6;
    grid-row: 3 / span 2;
    .component-design{
        block-size: calc(var(--size) * 2 + 1rem);
    }
  }
  .airPods-Pro{
    grid-column: 7 / 13;
    grid-row: 3;
  }
}