#file_modal {
  .modal-mask {
    .modal-wrapper {
      .modal-container {
        margin-right: calculateRem(100);
        margin-left: calculateRem(100);

        .modal-body {
          .file-info-container {
            display: flex;

            .image {
              flex-grow: 1;
              flex-shrink: 1;
              flex-basis: 100%;

              display: flex;
              flex-direction: column;

              width: 0;
              max-width: 50%;

              padding-right: calculateRem(70);

              overflow: hidden;

              .image-container {
                flex-grow: 1;
                flex-basis: 0px;

                overflow: hidden;

                img {
                  display: block;

                  height: 100%;
                }
              }

              .thumbnail {
                width: calculateRem(425);
                height: calculateRem(400);

                background-position: center;
                background-size: cover;
              }
            }

            .info {
              flex-grow: 1;
              flex-shrink: 1;

              min-width: 50%;

              .inputs {
                margin-top: calculateRem(30);

                .input-container {
                  &:not(:last-child) {
                    margin-bottom: calculateRem(20);
                  }

                  input, textarea {
                    width: 100%;
                  }
                }
              }
            }
          }
        }
        .modal-footer {
          margin-top: calculateRem(70);

          .buttons-container {
            display: flex;
            justify-content: flex-end;

            .button {
              &:not(:last-child) {
                margin-right: calculateRem(10);
              }
            }
          }
        }
      }
    }
  }
}