.rds-demos {
  position: relative;
  padding-top: 68px;

  @include mobile {
    padding-top: 46px;
  }

  .container {
    position: relative;

    >*:not(.terminals) {
      z-index: 2;
      position: relative;
    }
  }

  .terminals {
    position: relative;

    &:not(:first-child) {
      margin-top: 75px;

      @include mobile {
        margin-top: 34px;
      }
    }

    .code {
      position: absolute;
      top: -37px;
      left: -109px;
      user-select: none;

      @include dark {
        opacity: .4;
      }
    }

    .col {
      &:not(:last-child) {
        @include mobile {
          margin-bottom: 45px;
        }
      }
    }
  }

  .terminal {
    z-index: 2;
    position: relative;

    &.right {
      @include desktop-tablet {
        margin-top: 60px;
      }
    }

    .terminal-header {
      position: relative;
      height: 36px;
      border-radius: 10px 10px 0 0;
      background-color: $secondary-black;

      @include mobile {
        height: 31px;
      }

      svg {
        position: absolute;
        top: 50%;
        left: 17px;
        transform: translateY(-50%);

        @include mobile {
          zoom: .85;
        }
      }
    }

    .terminal-body {
      padding: 36px 69px 40px;
      min-height: 280px;
      border-radius: 0 0 10px 10px;
      border: 2px dashed $purple;
      border-top: none;
      background-color: $white;

      @include mobile {
        padding: 31px 25px 35px;
        min-height: 220px;
      }

      @include dark {
        background-color: $primary-black;
      }

      .title {
        margin: 0;
        line-height: 1;
        font-size: 26px;

        @include mobile {
          font-size: 22px;
        }

        @include dark {
          color: $white;
        }
      }

      .links {
        margin: 0;
        padding: 0;
        list-style: none;
        line-height: 1.45;

        @include mobile {
          font-size: 15px;
        }

        &:not(:first-child) {
          margin-top: 30px;

          @include mobile {
            margin-top: 24px;
          }
        }

        li {
          &:not(:first-child) {
            margin-top: 10px;
          }
        }

        a {
          text-decoration: underline;
          color: $primary-blue;
          transition: color .2s ease-in-out;

          @include dark {
            color: $white;
          }

          &:hover {
            color: $purple !important;
          }
        }
      }
    }
  }
}