@charset "utf-8";

.posting-list {
  margin-block: 0.5em;
}

.posting-image {
  inline-size: fit-content;
  margin-inline: auto;
  max-inline-size: 90%;
  background-color: #f8f8f8;
}

.posting-image .quotation {
  display: flex;
}

.posting-image .citation {
  font-style: italic;
  text-align: end;
}

@media all and (min-width: 768px) {
  .posting-image {
    margin-block-start: 2.4rem;
    padding-block: 24px 20px;
    padding-inline: 36px;
  }

  .posting-image .quotation {
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: flex-end;
    column-gap: 24px;
  }

  .posting-image .image {
    max-block-size: 400px;
  }

  .posting-image .citation {
    margin-block-start: 4px;
    font-size: 1.2rem;
  }
}

@media all and (max-width: 767px) {
  .posting-image {
    margin-block-start: 2rem;
    padding: 16px;
  }

  .posting-image .quotation {
    flex-flow: column nowrap;
    align-items: center;
    row-gap: 10px;
  }

  .posting-image .image {
    max-block-size: 300px;
  }

  .posting-image .citation {
    margin-block-start: 10px;
    font-size: 1rem;
  }
}