@use "../../../styles/int.scss";
@use "./constants.scss";

.container {
  margin-bottom: calc(44px - var(--Grid-gutter));
  color: int.$warmgray-100;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: int.$spacing-4;
    
  @include int.breakpoint-at-most("sm") {
    margin-bottom: calc(#{int.$spacing-8} - var(--Grid-gutter));
  }

  &.disableMargins {
    margin-bottom: 0;
  }
}

.header {
  text-align: center;
  text-wrap: balance;
}

.comment {
  width: 100%;
  max-width: constants.$reporter-comment-max-width;
}

.meta {
  width: 100%;
  display: flex;
  flex-flow: row wrap;
  row-gap: int.$spacing-1;
  column-gap: int.$spacing-2;
  justify-content: center;
  align-items: center;
}

.timestamp {
  color: int.$warmgray-60;

  @include int.sans($size: "000", $role: "component");
}

.visual {
  width: 100%;
}

.bottomVisual {
  margin-top: int.$spacing-6;
}

.image {
  display: inline-block;
  margin: 0 auto #{-1 * int.$spacing-4} auto;
}