.message {
  @container (max-width: theme('screens.sm')) {
    border-radius: 0;
    width: auto;
    margin-left: -16px;
    margin-right: -16px;
    padding-top: 2px;
    padding-bottom: 2px;
  }
}

.coverImageNsfwActions {
  height: 100%;
  width: 100%;
}

.coverImageWrapper {
  overflow: hidden;
  border-radius: var(--mantine-radius-md);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;

  @container (max-width: theme('screens.sm')) {
    width: auto;
    margin-left: -16px;
    margin-right: -16px;
    max-height: auto;
    border-radius: 0;
    display: block;
  }
}

.coverImage {
  position: relative;
  width: 100%;
  overflow: hidden;
  height: 0;
  padding-bottom: var(--cover-image-size-desktop);

  @container (max-width: theme('screens.sm')) {
    width: auto;
    border-radius: 0;
    padding-bottom: var(--cover-image-size-mobile);

    div {
      border-radius: 0;
    }
  }

  & > div {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}

.profileSection {
  width: auto;
  margin-left: -16px;
  margin-right: -16px;
  padding: 16px;
  position: relative;
  background: light-dark(
    var(--mantine-color-gray-0),
    var(--mantine-color-dark-6)
  );
}

.profileSectionWithCoverImage {
  padding: 0 16px;

  >div {
    position: relative;
    height: auto;
    top: -36px;
    margin-bottom: -18px;
  }
}
