IT61/it61-rails

.half,
.full {
  @include media($mobile-viewport) {
    margin: 0.5em 0;
  }
}

.half {
  @include span-columns(6);

  @include media($mobile-viewport) {
    @include span-columns(12);
  }
}

.full {
  @include span-columns(12);
}

.outer {
  @include outer-container;
  @include media($mobile-viewport) {
    margin: 0;
    padding-left: 0;
    padding-right: 0;
  }
  padding: 0.3em 0.5em;
  margin: 1.5em 0;
}

.edit-user-card {
  @include outer-container();
  margin-bottom: $card-padding;

  .picture {
    width: auto;
    max-width: 350px;
    @include media($medium-viewport) {
      max-width: 240px;
    }
    @include media($mobile-viewport) {
      width: 100%;
      max-width: 100%;
    }
  }

  .image-container {
    @include span-columns(4);
    @include omega();

    @include media($mobile-viewport) {
      @include span-columns(12);
    }

    .edit-picture-buttons {
      input {
        display: none;
      }

      @include media($mobile-viewport) {
        margin-top: 2em;
      }

      > .btn {
        @include media($mobile-viewport) {
          margin: 0.3em 0;
        }
        padding: 1em 1em;
        width: 100%;
        margin: 0.5em 0;
        text-align: center;
      }

      .file_upload {
        margin: 0;
        width: 100%;
        > button {
          width: 100%;
          padding: 1em 1em;
          margin: 0;
        }
      }
    }
  }

  .inputs-container {
    @include span-columns(8);
    @include omega();
    @include media($mobile-viewport) {
      @include span-columns(12);
    }
    padding: $card-padding;
  }

  .bottom-container {
    @include span-columns(12);
    padding: $card-padding;

    h3 {
      font-size: 1.5em;
      @include media($mobile-viewport) {
        font-size: 1.8em;
        font-weight: 700;
        margin-bottom: 0;
      }
    }

    .input-float-label textarea {
      resize: vertical;
      overflow: hidden;
    }

    .social-container {
      width: 100%;
      margin: 1em 0;
      display: flex;
      align-content: center;
      gap: 0.5rem;

      @include media($mobile-viewport) {
        flex-direction: column;
      }

      .social-label {
        align-content: center;
        @include media($mobile-viewport) {
          width: 100%;
          font-size: 1.2em;
          display: inline-block;
          font-weight: 500;
        }
        width: 8em;
        font-size: 1em;
      }

      .btn {
        @include media($mobile-viewport) {
          margin: 0.2em 30% 0.2em 0;
          width: 100%;
        }
        margin: 0 0.2em;
        padding: 0.5em 1.2em;
        width: 10em;
        outline: none;
        text-align: center;

        span {
          line-height: 1.5em;
          vertical-align: middle;
        }
        .fa {
          font-size: 1.5em;
          vertical-align: middle;
          margin-right: 0.3em;
        }
      }
    }
  }

  .bottom-flash {
    float: left;
    width: 100%;
    text-align: center;
    color: $blue;
    vertical-align: middle;
  }
}

.edit-profile-bottom-buttons {
  @include clearfix;
  @include media($mobile-viewport) {
    bottom: 23px;
    position: static;
    float: none;
    margin-top: 25px;
    width: 100%;
  }
  @include media($medium-viewport) {
    bottom: 23px;
  }

  padding: $card-padding;

  .btn {
    margin-left: 15px;
    @include media($mobile-viewport) {
      width: 45%;
      text-align: center;
    }
  }

  margin-top: 25px;
  float: right;

  .btn {
    @include media($mobile-viewport) {
      width: 100%;
      margin: 5px 0;
      padding: 1em 1em;
      font-size: 1.1em;
    }
    margin-right: $card-padding;
  }
}