@import './reset.css';
@import './theme.css';
@import './base.css';

.dark-theme {
  color: var(--white);
}
.light-theme {
  color: var(--black);
}
.grid-wrapper {
  display: grid;
  column-gap: var(--small-spacing);
  grid-template-columns: repeat(2, 1fr);
  .card-wrapper:nth-child(1),
  .card-wrapper:nth-child(2),
  .card-wrapper:nth-child(3) {
    grid-column: span 2;
  }
}

.card-wrapper {
  block-size: var(--size);
  padding-top: var(--extra-large-spacing);

  .apple-card {
    block-size: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-top: var(--extra-large-spacing);
  }

  .item-name {
    font-size: var(--extra-large-text);
  }

  .item-description {
    font-size: var(--medium-text);
    padding-block-end: var(--x-small-spacing);
    line-height: var(--line-normal);
  }
}

.apple-card.comming-soon {
  .tba-date {
    color: var(--gray);
    font-size: var(--small-text);
    padding-block-end: var(--x-small-spacing);
  }
}
.more-button {
  box-shadow: 0 0 0 1px black;
  border-radius: 15px;
  display: inline-block;
  padding-block: var(--x-small-spacing);
  padding-inline: var(--small-spacing);
  margin-inline: var(--base-text);
  font-size: var(--x-small-text);
}

.more-button.whiteblue {
  box-shadow: 0 0 0 1px var(--blue-200);
  background: var(--blue-300);
  color: var(--white);
}
.more-button.blue {
  box-shadow: 0 0 0 1px var(--blue-400);
  color: var(--blue-400);
}

.more-button.blackwhite {
  box-shadow: 0 0 0 1px var(--black);
  background: var(--black);
  color: var(--white);
}

.apple-card.ipad-pro {
  background: url(../products/ipad_pro_wide.jpeg) no-repeat;
  background-size: cover;
  background-position: center;
}
.apple-card.ipad-air {
  background: url(../products/ipad_air_wide.jpeg) no-repeat;
  background-size: cover;
  background-position: center;
}
.apple-card.iphone15-pro {
  background: url(../products/iphone15_pro_wide.jpeg) no-repeat;
  background-size: cover;
  background-position: center;
}
.apple-card.iphone15 {
  background: url(../products/iphone15.jpeg) no-repeat;
  background-size: cover;
  background-position: center;
}
.apple-card.apple-watch {
  background: url(../products/apple_watch.jpeg) no-repeat;
  background-size: cover;
  background-position: center;
}
.apple-card.macbook-air {
  background: url(../products/macbook_air.jpeg) no-repeat;
  background-size: cover;
  background-position: center;
}
.apple-card.airpods-pro {
  background: url(../products/airpods_pro.jpeg) no-repeat;
  background-size: cover;
  background-position: center;
}

@media (max-width: 1024px) {
  .card-wrapper {
    padding-top: var(--large-spacing);

    .item-name {
      font-size: var(--large-text);
    }

    .item-description {
      font-size: var(--base-text);
    }
    .more-button {
      font-size: var(--xx-small-text);
    }
  }
  .apple-card.iphone15-pro {
    background: url(./products/iphone15_pro.jpeg) no-repeat;
    background-size: cover;
    background-position: center;
  }
}