/* xs */
/* @media (min-width: 475px) {} */

/* sm */
/* @media (min-width: 640px) {} */

/* md */
/* @media (min-width: 768px) {} */

/* lg */
/* @media (min-width: 1024px) {} */

/* xl */
/* @media (min-width: 1280px) {} */

/* 2xl */
/* @media (min-width: 1536px) {} */

.paper__next-container {
  display: flex;
  justify-content: right;
  margin: 2rem 0 0;
  padding: 0 1rem;
  /* border: 1px solid red; */

  button {
    height: 2rem;
    width: 5rem;
    cursor: pointer;
    text-align: right;
    /* border: 1px solid red; */
  }

  .paper__next {
    display: inline-block;
    height: 1rem;
    /* border: 1px solid red; */
  }
}

.paper-style1 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  padding: 2rem 1.5rem 0;
  /* deduct the next page button's height of 4rem */
  max-height: calc(100% - 4rem);
  /* border: 1px solid red; */

  img {
    max-height: calc(0.6 * var(--paper-height));
  }

  p {
    font-size: 0.9rem;
  }
}

/* xs */
@media (min-width: 475px) {
  .paper-style1 {
    p {
      font-size: 1.2rem;
    }
  }
}

/* sm */
@media (min-width: 640px) {
  .paper-style1 {
    flex-direction: row;
    height: 100%; /* limited by the max-height set above */

    img {
      max-height: calc(0.7 * var(--paper-height));
      max-width: 50%;
    }

    p {
      font-size: 1.3rem;
    }
    /* border: 1px solid red; */
  }
}

/* md */
/* @media (min-width: 768px) {} */

/* lg */
/* @media (min-width: 1024px) {} */

/* xl */
/* @media (min-width: 1280px) {} */

/* 2xl */
/* @media (min-width: 1536px) {} */

.paper_style2 {
  display: flex;
  flex-direction: column;
  padding: 2rem 1rem 0;
  gap: 2rem;

  img {
    width: 100%;
  }

  p {
    font-size: 0.9rem;
  }
}

/* xs */
@media (min-width: 475px) {
  .paper_style2 {
    p {
      font-size: 1.2rem;
    }
  }
}

/* sm */
@media (min-width: 640px) {
  .paper_style2 {
    /* refactor to use flex to include button instead of using 4rem */
    height: calc(100% - 4rem);
    justify-content: center;
    gap: 3rem;
    /* border: 1px solid red; */

    img {
      max-width: 75%;
      /* max-height: calc(0.7 * var(--paper-height)); */
      object-fit: cover;
      object-position: top;
    }

    p {
      width: 55%;
      align-self: flex-end;
      font-size: 1.3rem;
      /* border: 1px solid red; */
    }
  }
}

/* md */
/* @media (min-width: 768px) {} */

/* lg */
/* @media (min-width: 1024px) {} */

/* xl */
/* @media (min-width: 1280px) {} */

/* 2xl */
/* @media (min-width: 1536px) {} */

.paper-style3 {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 3rem 1rem 0;

  .paper-style3__img-p2 {
    display: flex;

    img {
      width: 48%;

      object-fit: contain;
      object-position: top;
      /* border: 1px solid red; */
    }
    /* border: 1px solid red; */
  }

  p {
    align-self: left;
    font-size: 0.9rem;
    padding: 0.5em 0.5em 0 0;
  }
}

/* xs */
@media (min-width: 475px) {
  .paper-style3 {
    max-height: calc(100% - 4rem);

    .img1 {
      height: calc(0.4 * var(--paper-height));
      object-fit: cover;
      object-position: top;
    }

    .paper-style3__img-p2 {
      height: calc(0.4 * var(--paper-height));
    }

    p {
      font-size: 1.2rem;
      padding: unset;
      align-self: center;
    }
  }
}

/* sm */
/* @media (min-width: 640px) {} */

/* md */
/* @media (min-width: 768px) {} */

/* lg */
/* @media (min-width: 1024px) {} */

/* xl */
/* @media (min-width: 1280px) {} */

/* 2xl */
/* @media (min-width: 1536px) {} */