@import 'sass-mq/mq';
@import 'styles/variables.scss';

.ListingDetail {
  .ListingDetail-mainImage {
    width: 532px;
    height: 532px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;

    @include mq($from: tablet, $until: pageWidth) {
      width: 400px;
      height: 400px;
    }

    @include mq($until: tablet) {
      width: 100%;
      height: 100%;

      img {
        width: 100%;
        height: auto;
        max-height: 500px;
      }
    }
  }

  .ListingDetail-buyNowPanel {
    position: fixed;
    bottom: 10px;
    left: 0;
    right: 0;
    border-top-style: solid;
    border-top-width: 1px;
  }
}