/* The cover grows under the avatar while its reserved spacing preserves the profile grid. */

@media (min-width: 761px) {
  .profile-cover-card .profile-cover::after,
  .profile-cover-card .profile-cover > img {
    display: none !important;
  }
}

@media (max-width: 760px) {
  #mobileProfileContent .m-profile-hero,
  #mobileProfileContent.is-editing .m-profile-hero {
    overflow: hidden !important;
    border-radius: 24px !important;
    background: var(--m-tile) !important;
  }

  #mobileProfileContent .m-profile-cover,
  #mobileProfileContent.is-editing .m-profile-cover {
    position: relative !important;
    inset: auto !important;
    isolation: isolate;
    z-index: 1;
    width: 100%;
    height: 118px !important;
    min-height: 118px !important;
    margin-bottom: 0 !important;
    overflow: visible !important;
    border-radius: 0 0 24px 24px !important;
    background: transparent !important;
  }

  #mobileProfileContent .m-profile-cover::before,
  #mobileProfileContent .m-profile-cover::after {
    position: absolute;
    inset: 0 0 -42px;
    content: "";
    pointer-events: none;
  }

  #mobileProfileContent .m-profile-cover::before {
    display: none;
  }

  #mobileProfileContent .m-profile-cover::after {
    z-index: 1;
    background: var(--m-profile-cover) center / cover no-repeat;
    border-radius: 0 0 24px 24px;
  }

  #mobileProfileContent .m-profile-avatar,
  #mobileProfileContent.is-editing .m-profile-avatar {
    position: relative;
    z-index: 2;
    margin-top: -42px !important;
  }

  #mobileProfileContent .m-profile-main,
  #mobileProfileContent.is-editing .m-profile-main {
    position: relative;
    z-index: 2;
    min-height: 130px !important;
    height: auto !important;
    background: transparent !important;
  }

  #mobileProfileContent .m-profile-main::before,
  #mobileProfileContent.is-editing .m-profile-main::before {
    position: absolute;
    z-index: -1;
    top: 42px;
    right: 0;
    bottom: 0;
    left: 0;
    content: "";
    background: var(--m-tile);
  }
}