@import '../../styles/breakpoints/index';

.opera {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: calc(var(--margin) * 4);
  padding-left: var(--pageMargin);
  padding-right: var(--pageMargin);
}

.top {
  display: grid;
  width: 100%;
  margin-bottom: calc(var(--margin) * 2);
  grid-column-gap: var(--gutter);
  grid-row-gap: var(--gutter);
  position: relative;

  @media ($sm) {
    grid-template-columns: repeat(2, 1fr);
    align-items: flex-start;
  }
}

.images {
  width: 100%;
  display: grid;
  grid-row-gap: var(--margin);
}

.pdp {
  display: grid;
  align-items: center;
  position: sticky;
  top: calc(var(--CustomSearchBox-inputHeight) + 2px + var(--Layout-paddingTop));

  @media (orientation: portrait) and ($sm) {
    padding-top: var(--gutter);
    padding-bottom: var(--gutter);
    padding-left: var(--gutter);
    padding-right: var(--gutter);
  }

  @media ($md) {
    padding-top: var(--gutter);
    padding-bottom: var(--gutter);
    padding-left: var(--gutter);
    padding-right: var(--gutter);
  }

  @media ($xl) {
    padding: 4rem;
  }
}

.title {
  margin-bottom: var(--margin);
}

.description {
  margin-bottom: var(--margin);
  line-height: 1.75;
  width: 100%;

  * {
    max-width: 100%;
  }
}

.price {
  letter-spacing: 0;
}

.estimate {
  margin-right: .3em;
}

.value {
  margin-bottom: var(--margin);
  display: flex;
  flex-direction: row;
  align-items: baseline;
}

.category-list {
  font-size: var(--size-2);
  margin-bottom: 2em;

  @media ($sm) {
    font-size: var(--size-3);
  }

  @media ($md) {
    font-size: var(--size-4);
  }
}

.tags {
  margin-bottom: var(--margin);
}
