.main-account {
   .account-box {
      border: 1px solid $border-color;
      display: flex;
      align-items: center;
      margin-bottom: $spacer-xl;
      padding: 0 20px;
   }

   .account-image {
      padding: 30px;
      text-align: center;

      span {
         background: $body-bg-alt;
         border-radius: 50%;
         color: $text-dark;
         display: inline-block;
         font-size: 34px;
         font-weight: bold;
         line-height: 98px;
         width: 98px;
         height: 98px;
         text-transform: uppercase;
      }

      img {
         border-radius: 50%;
         display: inline-block;
         width: 98px;
         height: 98px;
      }
   }

   .account-info {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: flex-start;
      flex-grow: 1;
      margin: 0 -5px;
      padding: 30px;

      .name {
         color: $text-dark;
         font-size: 26px;
         font-weight: $font-weight-bold;
         line-height: $line-height-sm;
         width: 100%;
      }

      p,
      .btn {
         margin: 5px;
      }
   }

   @media (max-width: $lg - 1) {
      .account-box {
         padding: 0;
      }

      .account-image,
      .account-info {
         padding: 15px;
      }
   }

   @media (max-width: $xs - 1) {
      .account-info {
         padding: 10px;
      }

      .account-image {
         padding: 10px 0 10px 10px;

         img {
            width: 75px;
            height: 75px;
         }
      }
   }
}
