.block {
  all: unset;
  box-sizing: border-box;
  font-family: var(--font-family-body);
}

.blockWithDisplayRevert {
  composes: block;
  display: revert;
}

.root {
  composes: blockWithDisplayRevert;
  width: 288px;
}

.title {
  composes: block;
  align-items: center;
  border-bottom-style: solid;
  border-color: var(--grey6);
  border-width: 1px;
  color: var(--grey12);
  display: flex;
  justify-content: space-between;
  margin-bottom: 16px;
  padding-bottom: 4px;
  padding-left: 16px;
  padding-right: 6px;
  padding-top: 4px;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
}

.titleCloseIcon {
  composes: block;
  color: var(--grey11);
  display: flex;
  padding: 4px;

  &:hover {
    cursor: pointer;
  }
}

.mediaContainer {
  composes: block;
  display: flex;
  margin-bottom: 8px;
  padding-inline: 16px;
}

.media {
  composes: blockWithDisplayRevert;
  border-color: var(--grey6);
  border-radius: 6px;
  border-style: solid;
  border-width: 1px;
  overflow: hidden;
  width: 100%;
  height: 146px;
}

.description {
  composes: blockWithDisplayRevert;
  color: var(--grey11);
  margin-bottom: 16px;
  padding-inline: 16px;
  font-size: 12px;
  font-weight: 400;
  line-height: 20px;
}

.closeButtonContainer {
  composes: blockWithDisplayRevert;
  padding-bottom: 16px;
  padding-inline: 16px;
}