.pp {
  padding: 8rem 0;
}

.pp-inner {
  padding: 4.8rem;
  box-shadow: 0px 0px 15px 0px #00000040;
  display: grid;
  grid-template-columns: 1fr 1.7fr;
  gap: 8rem;
}

.pp-left {
  div {
    max-width: 35rem;
    max-height: 43.8rem;
    width: 100%;
    height: 100%;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
}

.pp-right {
  display: flex;
  flex-direction: column;
  gap: 4.8rem;
}

.pp-right-top,
.pp-right-bottom {
  display: flex;
  flex-direction: column;
  gap: 2.4rem;

  ul {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3rem;

    li {
      width: 100%;

      p {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 1.8rem;
        padding: 1.35rem;
        display: block;
        width: 100%;
        text-align: center;
        background: #f8f8f8;
      }
    }
  }

  h3 {
    font-size: 2.8rem;
  }
}

.pp-right-top {
  h3 {
    color: $base-green;
  }
}

.pp-identifier {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #fff;
  font-size: 1.8rem;
  padding: 1.35rem;
  display: block;
  background: $base-green;
  width: 100%;
  text-align: center;
}

@media screen and (max-width: 1200px) {
  .pp-inner {
    display: flex;
    flex-direction: column;
  }
  .pp-left {
    @include grid(false, 1fr);

    &.ready {
      * {
        justify-self: center;
      }
    }

    * {
      display: flex;
      justify-content: center;
    }
  }
}

@media screen and (max-width: 800px) {
  .pp {
    padding-top: 4rem;
  }
  .pp-inner {
    gap: 3.2rem;
    padding: 3.2rem;
  }
}
@media screen and (max-width: 750px) {
  .pp-right-top,
  .pp-right-bottom {
    ul {
      display: flex;
      flex-direction: column;
    }
  }
  .pp-right-top,
  .pp-right-bottom {
    h3 {
      text-align: center;
    }
  }
}
