.root {
  @apply relative grid items-start my-12 gap-8 grid-cols-1;

  @screen md {
    @apply grid-cols-12;
  }
}

.button {
  min-width: 300px;
  text-align: center;
}

.productDisplay {
  @apply flex px-0 pb-0 relative box-border min-h-full col-span-7;
  margin-right: -2rem;
  margin-left: -2rem;

  min-height: 400px;

  @screen md {
    @apply px-24 mx-0;
  }
}

.nameBox {
  @apply absolute top-0 left-0 z-50;

  & .name {
    @apply px-6 py-2 bg-primary text-primary font-bold text-3xl;
  }

  & .price {
    @apply px-6 py-2 pb-4 bg-primary text-primary font-bold inline-block tracking-wide;
  }

  @screen md {
    & .name,
    & .price {
      @apply bg-violet text-white;
    }
  }
}

.squareBg {
  @apply absolute inset-0 bg-violet z-0;
  max-height: 250px;

  @screen md {
    @apply inset-14;
    min-height: 100%;
  }
}

.sidebar {
  @apply flex flex-col md:pt-24 col-span-5;
}

.sliderContainer {
  @apply absolute z-10 inset-0 flex items-center justify-center;

  @screen lg {
    @apply -m-12;
  }
}

.img {
  @apply w-full object-cover;

  @screen xl {
    margin-top: -14%;
    height: 140%;
  }
}